1

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

$('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过滤没有被重置......有什么想法吗？

4

2 回答 2

1

问题是您需要使用事件的目标，而不是“this”。现在“this”指的是当前表，但您需要参考当前输入框，然后使用最接近（）找到它的父 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) 引用当前输入框。

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

于 2013-06-03T00:29:30.143 回答
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/

于 2013-06-03T00:11:19.923 回答