使用输入值填充和创建表答案

【问题标题】：Filling and creating table with input value使用输入值填充和创建表
【发布时间】：2014-02-27 11:10:51
【问题描述】：

我的意见：

<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn"></button>

每次点击按钮 add_btn 后，我需要在我的表格 (<tr>) 中附加表单输入值。一开始，桌子是空的。仅限<tbody>。

<table class="mytab">
 <tbody>
    <tr>
        <td> HERE_VALUE_FROM_NAME_FIELD</td>
        <td>HERE_VALUE_FROM_AGE_FIELD</td>
    </tr>
    <tr>
        <td> HERE_NEXT_VALUE_FROM_NAME_FIELD</td>
        <td>HERE_NEXT_VALUE_FROM_AGE_FIELD</td>
    </tr>
  </tbody>
</table>

点击功能：

$("#myform").on('click', "#add_btn", function(e) {
        e.preventDefault();
        //fill table
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这样：

HTML

<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn">click</button>

<table border="1" class="mytab"></table>

JQuery：

$("#add_btn").on('click', function(e) {
    e.preventDefault();
    var name = $('#id_name').val(), 
        age = $('#id_age').val();

    $('<tr><td>'+name+'</td><td>'+age+'</td></tr>').appendTo( $('.mytab') );
});

演示

http://jsfiddle.net/jogesh_pi/dfg2R/

有用的链接： appendTo()

【讨论】：

为什么在age 之前没有var？编辑：没关系，我没有注意到逗号。

【解决方案2】：

稍微搜索一下 jQuery DOM 就会给你答案。见jQuery.append()

$( '#table_id' ).append(
    $('<tr />').append(
        $('<td/>').text($('#id_name').value())
    ).append(
        $('<td/>').text($('#id_age').value())
    )
);

【讨论】：

【解决方案3】：

您可以在返回的行上使用 insertRow 和 insertCell。

http://jsfiddle.net/dfg2R/2/

insertCell

insertRow

这是一个例子：

$("#myform").on('click', "#add_btn", function(e) {
        e.preventDefault();
        var table = $("table.mytab")[0]
        var newRow = table.insertRow(0);
        var newCell = newRow.insertCell();
        newCell.innerText = $("#id_name").val();
        var newCell = newRow.insertCell();
        newCell.innerText = $("#id_age").val();
});

【讨论】：

【解决方案4】：

如果你想使用 jQuery，你可以使用.append()

$(".myTab tbody").append("<tr><td>" + valueName+ "</td><td> + valueAge + </td></tr>");

【讨论】：