Question

我有两个输入字段。

<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>

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

$(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);


});

这就是我所做的。 Jquery的：

{{1}}

第一列的结果没问题。然后，当我点击添加按钮时，新行似乎被移位

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);

在表中追加新行

3 个答案: