Question

我的HTML页面中有5 <tr>个。我希望得到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();
});

Answer 2

使用后：

$('tr:last').after('<tr>...</tr><tr>...</tr>');

我宁愿使用表格的id：

$('#tableId tr:last').after('<tr>...</tr><tr>...</tr>');

Answer 3

尝试，

var xTr= $('tr');
var xHtml = xTr.filter(':gt('+ (xTr.length - 6) +')').map(function(){return this.outerHTML;}).get().join('');
xTr.filter(":last").after(xHtml);

在jQuery的最后一个tr下面添加tr

3 个答案: