0

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

我已经看到这个关于如何通过链接进行操作的小提琴。我想改变这一点，以便在最后一个 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。

任何帮助表示赞赏。

4

2 回答 2

2

对输入使用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 事件仅在特定输入模糊时触发（当它失去焦点时）

小提琴在这里 更新了小提琴

于 2013-03-18T13:34:16.517 回答
1

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

通过触发 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);
    }
});
于 2013-03-18T13:33:03.500 回答