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函数。希望它会奏效。 Check this answer link

使用Javascript中的onblur事件在动态添加表格底部的行（带按钮）

3 个答案: