Question

我在表单中有一个表格，当用户在表格的最后一行输入输入时，我想要追加新行。

$('table.form-table').on('input', function() {
    var tableID = '#' + $(this).closest('table').attr('id');
    if(jQuery(this).closest('tr').is(':last-child')) {
        var currTR = $(this).closest('tr');
        var currTRhtml = '<tr>' + currTR.html() + '</tr>';
        var nextRow = jQuery(currTRhtml);

        var checkBox = jQuery('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
        jQuery(tableID).append(nextRow);
        checkBox.appendTo(currTR);
    }   
});

如果需要html代码（简化/修剪）：

<table class="form-table"  id="XXX" border="1" cellspacing="0" cellpadding="3">
<thead>
    <tr class="main"><th nowrap colspan="3" align="left" 
        class="border-left border-top border-right">
        <h3>XXX</h3></th>
    </tr>
    <tr>
        <th>header</th>
        </tr>
</thead>
<tbody>
            <tr>
    <input type="hidden" name="isnew" value="">
    <td >
            <input type="text" 
             name="new_text"
             value="">
            </td>
            </tr>
</tbody>
</table>

问题是这只能运行一次，并且不会继续追加新行。好像last-child过滤没有重置... 有什么想法吗？

Answer 1

我怀疑问题是您需要委派input事件，因为$(document).ready()上的附加行不存在。尝试做这样的事情来委托处理程序：

$(document).ready(function () {
    $('table.form-table tbody').on('input', 'tr', function () {
        var self = $(this),
            tableID = '#' + self.closest('table').attr('id'),
            currTR = self.closest('tr'),
            currTRhtml = '<tr>' + currTR.html() + '</tr>',
            nextRow = $(currTRhtml),
            checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
        if (currTR.is(':last-child')) {
            $(tableID).append(nextRow);
            checkBox.appendTo(currTR);
        }
    });
});

小提琴：http://jsfiddle.net/KW7ET/

Answer 2

问题是你需要使用事件的目标，而不是“this”。现在“this”指的是当前表，但是你需要引用当前的输入框，然后使用nearest（）来查找它的父tr（和：first-child以确保它是最后一个）。因此，您的代码需要看起来更像这样：

$('table.form-table').on('input', function(e) {
    var tableID = '#' + $(this).closest('table').attr('id');
    if ($(e.target).closest('tr').is(':last-child')) {
        var currTR = $(e.target).closest('tr');
        var currTRhtml = '<tr>' + currTR.html() + '</tr>';
        var nextRow = $(currTRhtml);

        var checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
        $(tableID).append(nextRow);
        checkBox.appendTo(currTR);
    }   
});

注意我将事件作为“e”传递，然后使用$（e.target）引用当前输入框。

Here是一个有效的JS小提琴。

如何多次向表中追加新行？

2 个答案: