在最后一个表格单元格中输入值时向表格添加行答案

【问题标题】：Add row to table on entering a value in last table cell在最后一个表格单元格中输入值时向表格添加行
【发布时间】：2013-03-06 20:37:39
【问题描述】：

当我在最后一个表格单元格中输入数据时，我想在表格中添加一个新行。

我已经看到了这个fiddle，关于如何使用链接进行操作。我想改变这一点，以便在最后一个 td 中使用 onChange 添加额外的行。

所以，使用jquery 1.7，代码是：

<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

<script type="text/javascript">
var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});
</script>

我想更改它以将更改/输入数据的行动态添加到最后一个 TD 中。

类似的，

<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" onclick="add-author"/></td></tr>
</table>


<script type="text/javascript">
var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});
</script>

所以 onclick / onchange 触发 jQuery 添加一个新行，根据计数器值具有唯一的 id。

感谢任何帮助。

【问题讨论】：

标签： jquery dynamic html-table append row

【解决方案1】：

对输入使用 on 更改事件，以便它也适用于动态添加的行的输入。

试试这个

更新

var counter = 1;
jQuery("table.authors-list").on('change','input[name^="first_name"]',function(event){
  event.preventDefault();
  counter++;
  var newRow = jQuery('<tr><td><input type="text" name="first_name' +
    counter + '"/></td><td><input type="text" name="last_name' +
    counter + '"/></td><td><a class="deleteRow"> x </a></td></tr>');
  jQuery('table.authors-list').append(newRow);
});

 jQuery("table.authors-list").on('click','.deleteRow',function(event){

   $(this).closest('tr').remove();
 });

我在这里为firstname 输入更改事件。您可以将其更改为您想要的任何选择器...

注意：for input change 事件仅在特定输入模糊时触发（当它失去焦点时）

fiddle here updated fiddle

【讨论】：

谢谢@bipen。非常适合我需要的东西，通过第一个单元格思考它实际上更有意义。无论如何，如果我想删除当前行，添加它是否容易？再次感谢。
是的..你必须修改你的代码并添加另一个元素..挂在
传奇。谢谢比彭。我只需要运行这段代码以确保我正确理解它。它确实工作得很好，只是样式不适用。任何建议表示赞赏，但感谢您的意见。干杯，
是的，您可以在此处设置x 的样式.. 或在此处使用图像.. 您使用的任何元素，只是它应该具有class="deleteRow" 以便单击工作.. 无论如何欢迎。 . 很高兴它有帮助.. 编码愉快.. 干杯..:)

【解决方案2】：

这样的事情可以做到，尽管它会提出一些其他错误，您需要根据您最终想要实现的目标来解决这些错误。

通过触发 keyup 而不是更改，您可以编辑内容而无需添加更多空白行。

http://jsfiddle.net/yUfhL/209/

var counter = 1;
jQuery("table.authors-list").on("keyup", "input[name*='last_name']", function(event){
    event.preventDefault();
    if($(this).val().length == 1) {
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');

        jQuery('table.authors-list').append(newRow);
    }
});

【讨论】：