在表中追加新行

Question

我有两个输入字段。

<label>First Name:</label><input type="name" class="form-control" id="fname">
<label>Last Name:</label><input type="name" class="form-control" id="lname">
<button class="btn btn-primary" id="add">Add</button>

我正在尝试将值添加到表中。每次我点击添加按钮时，我都需要在新行中插入值：

<table class="table bordered" id="table">
   <thead><tr><td>S.N.</td><td>First Name</td><td>Last Name</td></tr></thead>
        <tbody id="tbody">
            <tr id="tr">
                <td></td>
                <td>
                    <div id="showf"></div>
                </td>
                <td>
                    <div id="showl"></div>
                </td>
            </tr>
        </tbody>
</table>

这就是我所做的。Jquery：

$(document).on('click', '#add', function (e) 
{ 
    e.preventDefault();
    var fname=$('#fname').val();
    var lname=$('#lname').val();
    $('#tbody').append($('#tr').html());
    $('#showf').append(fname);
    $('#showl').append(lname);

});

第一列的结果是可以的。然后下次我单击添加按钮时，新行将被替换为

Answer 1

您应该附加整个tr.

这应该是你的html:

<table class="table bordered" id="table">
   <thead><tr><td>S.N.</td><td>First Name</td><td>Last Name</td></tr></thead>
        <tbody id="tbody">
        </tbody>
</table>

您的Jquery应该是：

$(document).on('click', '#add', function (e) 
{ 
    e.preventDefault();
    var fname=$('#fname').val();
    var lname=$('#lname').val();
    $('#tbody').append('<tr><td>' + fname + '</td><td>' + lname + '</td></tr>');
});

Answer 2

关于您的代码，我不建议插入共享相同id属性的元素。考虑这种替代方法：

function addNameToTable($table, firstName, lastName) {
    var newRow = '<tr>';
    newRow += '<td></td>';
    newRow += '<td><div class="showf">' + firstName + '</div></td>';
    newRow += '<td><div class="showl">' + lastName + '</div></td>';
    newRow += '</tr>';
    $table.find('tbody').append(newRow);
}
$(document).on('click', '#add', function(e) {
    e.preventDefault();
    var $table = $('#table');
    var firstName = $('#fname').val();
    var lastName = $('#lname').val();
    addNameToTable($table, firstName, lastName);
});

Answer 3

您所能做的就是获取HTML表的最后一个索引。例如，若表中有3行，则使用Jquery的eq（）方法。等式（2）。。这将把您带到最后一个节点。

然后你可以附加任何你需要的HTML。。

以下是解决方案

$('#your_table > tbody > tr').eq(i-1).after(html);