在表中的行之间追加行

时间:2014-03-03 19:18:19

标签: javascript jquery

我在以下结构中有一个表,我想要动态地追加到表中的行。

                <table>
                                        <thead>
                                            <tr>
                                                <td>Work</td>
                                                <td>Award</td>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                               <td><input class="w_name" type='text'/></td>
                                               <td><input class="other" type='text'/></td>

                                            </tr>
                                                <tr>
                                                 <td><input class="w_name" readonly/></td>
                                                <td><input class="other" type='text'/></td>

                                            </tr>
                                                <tr>
                                               <td><input class="w_name" type='text'/></td>
                                                <td><input class="other" type='text'/></td>

                                            </tr>
                                        </tbody>
                                    </table>

我有这个附加

的jquery
        $('.btn-add').click(function() {
        var index = $('tr', $(this).closest("tbody")).index(this);
        alert(index);
         var tbody = $('tbody');
    var i = $('tbody tr').size() + 1;            
     tablerow="<tr><td><input class=\"w_name\" type='text'/></td> <td><input class=\"other\" type='text'/></td><td><input class=\"other\" type='text'/></td> <td><input class=\"other\"type='text'/></td><td><input class=\"other\" type='text'/></td><td><input class=\"other\" type='text'/><a href=\"#\" id=\"remScnt\">Remove</a></td><tr>";
     tbody.append(tablerow);
     i++;
     return false;

    });

我想在tbody中的第一个tr和最后两个trs之间追加行。建议!

2 个答案:

答案 0 :(得分:1)

试试这个:

$('#tableidhere > tbody > tr:first-child').after(tablerow)

http://jsfiddle.net/H6jH9/3/

答案 1 :(得分:0)

这是一种方式 -

var newRow = "<tr><td><input class=\"w_name\" type='text'/></td> <td><input class=\"other\" type='text'/></td><td><input class=\"other\" type='text'/></td> <td><input class=\"other\"type='text'/></td><td><input class=\"other\" type='text'/></td><td><input class=\"other\" type='text'/><a href=\"#\" id=\"remScnt\">Remove</a></td><tr>";
$('.add').click(function() {
    $(newRow).insertAfter($('tbody tr:first-child'));
});

http://jsfiddle.net/yA4CV/