Question

当我点击最后一行的最后一个td并按下tab时，会添加一个额外的tr，但我想知道为什么这行中的row_ctr没有改变$('table tr:nth-child(' + row_ctr + ') td:last').keydown(function(e) {第二行rowc工作正常。按Tab键只会在tr 15 last td中添加另一行。我做错了什么？

代码：

 var tr_num = 15;
var row_ctr = $('tr').length;
$('table tr:nth-child(' + row_ctr + ') td:last').keydown(function(e) {
    var code = e.keyCode || e.which;
    if (code == '9') {
        $('tr:nth-child(' + row_ctr + ')').after('<tr><td>' + parseInt(tr_num + 1) + '</td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>')
        tr_num+=1;
        row_ctr+=1;
        return false;
    } else {
        return true;
    }  
});

代码可以在这里找到：http://jsfiddle.net/Rw43V/2/

Answer 1

我没看到这句话：

$('table tr:nth-child(' + row_ctr + ') td:last').keydown(function(e) {

在JSfiddle链接中也是

，但上面的选择器不会像你想要的那样工作。

“row_ctr”的值在事件侦听器初始化时设置，因此只要激活事件侦听器，它就会保持为“15”。换句话说，即使变量“row_ctr”的值得到更新，它也不会改变上面的选择器。

通过查看JSfiddle，我假设您希望每当按下选项卡时，最后一个表行的最后一个表列添加一个新行。在这种情况下，您需要关闭当前事件侦听器，并在新添加的行上重新初始化新侦听器。

查看以下代码，例如关于如何关闭侦听器并在新行上重新初始化：

    lastRow = $('table tr:last td:last');
    lastRow.on('keydown', function(event){ return addRow(event); });

});

function addRow (e) {
    var code = e.keyCode || e.which;
    if (code == '9') {
        //alert('Tab pressed');
        $('tr:last').after('<tr><td>' + parseInt(tr_num + 1) + '</td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>')
        tr_num += 1;
        lastRow.off('keydown');
        lastRow = $('table tr:last td:last');
        lastRow.on('keydown', function(event){ return addRow(event); });
        return false;
    } else {
        return true;
    }
}

查看以下工作代码：

http://jsfiddle.net/QTx8q/1/

如何在jquery中更新计数器？

1 个答案: