如何使用jquery在html表中动态添加新行

Question

在我的html表中，我有几个输入元素。我想在表的末尾插入一行新的输入元素，当用户在填写上一个年龄列后点击输入按钮。我希望图片能让事情变得更清楚。是否有可能使用jquery，因为我是jquery的新手。任何形式的帮助将不胜感激..

Answer 1

通过猜测你的表格html结构，一般的想法是这样的：

$('input.last').keyup(function handleEnter(e){
    //enter hit on the input that has class last
    if(e.which == 13) {

       $(this).removeClass('last').unbind('keyup');

       $('.myTable').append('<tr><td><input name="input1"/></td><td><input name="input1"/> </td><td><input name="input1" class="last"/></td></tr>');

       $('.last').keyup(handleEnter);
    }
});

Answer 2

使用最后一行的最后一列作为jquery中的选择器。点燃它的onclick事件 并在表格的末尾添加一个新的

代码在这里

 <script>
            $(document).ready(function () {

                $('#tableId tr:last td:last').click(function () {
                    var tr = $('this').closest('tr');
                    $('#tableId').append(tr);
                });
            });
        </script>

Answer 3

尝试 http://datatables.net/

有关基本添加的信息，请参阅此内容：

http://datatables.net/release-datatables/examples/api/add_row.html

而且：

http://code.google.com/p/jquery-datatables-editable/wiki/AddingNewRecords

http://jquery-datatables-editable.googlecode.com/svn/trunk/addingrecords.html

Answer 4

这很简单：$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');有一些警告

我为你做了一个小小的尝试：http://jsfiddle.net/fNW8T/

我个人喜欢像AngularJS这样的框架，带有ngRepeat或者只是数据表。用手做这个很笨重。