javascript - Javascript 使用 dom 向表中添加数据

Question

我有两张表，一张有添加按钮，一张没有添加按钮。如何使用添加按钮将我输入的数据放入行中并让它出现在另一个表中？例如，如果我填写 1、2、3 等并单击添加，表格将更新为具有 5、4、6 的第 1 行。第 2 行有 1,2,3。然后如果我添加第三行，它将位于第 2 行下方。

这是我到目前为止的一个例子：

http://jsfiddle.net/r8yXp/4/

当单击添加按钮时，我只是不确定如何将输入字段中的数据获取到上表中。

Answer 1

一个稍微简化的答案，但您可以将此作为您尝试做的事情的基础：

Name:​<input type="text" id="name">
<input type="button" id="add" value="add"/>
<br/>
<table border="1">
    <tr>
    </th>Name</th>
    </tr>
    <tbody id="root"></tbody>
</table>
<script>
    $('#add').click(function(){
    var name = $('#name').val(); //get value from text field
    var root = $('#root'); //this is where you will attached the new row
    var tr = $("<tr>"); //the new row
    var td = $("<td>").text(name); //use text from textfield as the text for the new table row
    td.appendTo(tr);
    tr.appendTo(root);
    });
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是小提琴的链接：http: //jsfiddle.net/jrPxr/

要生成输入：

var input = $("<input>").attr({"type" : "text", "id" : "someID"}).val(name);

然后只需将其附加到其直接父级。在这种情况下，表定义：

input.appendTo(td);

您可以将类型更改为您想要的任何输入（收音机、复选框等）