2014-03-05 44 views
0

當我點擊最後一行的最後一個td並按下tab時會添加一個額外的tr,但是我想知道爲什麼這行中的row_ctr不會改變$('table tr:nth-child(' + row_ctr + ') td:last').keydown(function(e) {第二個row_ctr可以正常工作。按壓標籤只會在tr 15 last td時添加另一行。我究竟做錯了什麼?如何在jquery中更新計數器?

代碼:

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/

+0

有沒有'row_ctr'變量在你的小提琴的任何地方 – tewathia

+0

我的壞它現在更新。 – splucena

+0

最近添加的行的最後一個td上的按下標籤應該添加另一行,但它僅適用於tr 15 last td。 jsfiddle中的代碼應該澄清我的問題。 – splucena

回答

3

我沒有看到該行:

$('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/

相關問題