Question

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

关于如何使用链接，我看到了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添加一个新行，并根据计数器值使用uniqu。

感谢任何帮助。

Answer 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输入的更改事件..您可以将其更改为您想要的任何选择器...

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

fiddle here updated fiddle

Answer 2

这样的事情会做到这一点，虽然它会提出一些其他的错误，你需要根据你最终想要实现的目标来解决这些错误。

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

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);
    }
});

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

2 个答案: