javascript - 在 jQuery 中的最后一个 tr 的正下方添加 tr

Question

我有 5 <tr>在我的 HTML 页面中。我想获取 tr 的所有 HTML并追加在最后一个 tr 之后.我还想在添加 html 后添加一个删除行。我们应该怎么做？请帮助我。

在添加行上单击我要附加 HTML:

HTML

<tr style="display: table-row;"  id="first_tr">

</tr>
<tr style="display: table-row;" class="is_rows_hidden" id="second_tr">
</tr>
<tr id="add_row_td">
    <td colspan="8">
        <span id="addrow"  style="float:right">[+] Add row</span>
    </td>
    <!-- here i want to add remove row after the the first addition of the HTMl -->

</tr>
<tr style="display: table-row;" id="third_tr">
</tr>
<tr style="display: table-row;"  id="fourth_tr">
</tr>

我试过的是:

var xHtml = $('#first_tr ').map(function(){return this.outerHTML;}).get().join('');

我们如何从所有 tr 中获取所有 HTML然后将其附加到最后一个 tr 的下方？

Answer 1

// Get the HTML of the last 5 tr elements in the table
var html = "";
for(i=5;i>0;i--){
  html += $('table').find('tr:nth-last-child('+i+')').wrap('').parent().html();
}

// Append whatever you want to the new row
$('table').append("<tr><td>whatever</td><td><a class='remove' href='#'>Remove Row</a></td></tr>");

// Remove row
$('table').on('click', 'a.remove', function(){
  $(this).parent().parent().remove();
});