使用Javascript中的onblur事件在動態添加表格底部的行（帶按鈕）

Question

我的要求是，我有一個包含3列和5行的表。 當我使用最后一行時，應該動態地在最后一行之后添加一個新行，當我再次使用新創建的行時，應該最后動態添加一個新行，所以..但問題是我們不應該使用按鈕要添加行，我們必須使用onblur或onchange事件。 有誰能建議我解決上述問題？

Answer 1

為什么不使用focus事件，以便在開始使用最后一行時添加行？ 您可以向表中添加委托，以便即使對於新添加的行，該事件仍然有效：

$(function(){
  $('#TheTable').on('focus', 'input', function(){
    if ($(this).closest('tr').is(':last-child')) {
      $('#TheTable').append('<tr><td><input type="text"/></td></tr>');
    }
  });
});

Demio： http ： //jsfiddle.net/Guffa/2mcp3/

Answer 2

以下函數可用於向表中添加行。

function addrow() {
    var table = document.getElementById('tableid');
    var row = table.insertRow(table.rows.length);
    row.id = 'row'+table.rows.length; //ID the rows however you like, make each one unique though.
}

您可以考慮為表行添加onClick以添加新行。 你可以在addrow()函數中添加這樣的東西： row.onClick = addrow(); ，但如果您只想要最后一行執行此操作，請確保使用document.getElementById('otherrow').onClick = ""; 使用CSS ID“otherrow”重置舊行。

Answer 3

檢查以下鏈接，我正在使用按鈕單擊事件來調用該功能。 可以簡單地將其更改為任何文本字段或其他內容的onblur函數。 希望它會奏效。 檢查此答案鏈接