Question

我已经生成了html，我需要使用Jquery重构html，如下所示：

原件：

<table id="myTableID">
<tr id="tr01">
    <td>Col 1 Value</td>
</tr>
<tr id="tr02">
    <td>Col 2 Value</td>
</tr>
<tr id="tr03">
    <td>Col 3 Value</td>
</tr>
<tr id="tr04">
    <td>Col 4 Value</td>
</tr>
</table>

预期：

<table id="myTableID">
<tr id="tr01">
    <td>Col 1 Value</td>
    <td>Col 2 Value</td>
</tr>
<tr id="tr02">
    <td>Col 3 Value</td>
    <td>Col 4 Value</td>
</tr>
<tr id="tr03">
</tr>
<tr id="tr04">
</tr>
</table>

var tableNew = "<table id='myTableID'>"+
       "<tr><td>new "+
       "</td></tr>"+
       "</table>";

       $('#myTableID').replaceWith(tableNew);

我想出了迭代和替换的想法，还有更好的主意吗？

Answer 1

这个单行jQuery将满足您的需求。只需将它应用于您需要重新格式化的每一行：

$('#tr01').append($('#tr02').contents());

有一个小提琴here

Answer 2

试试这样：

$( "#tr03 > td" ).appendTo( "#tr01" );

您可以参考：http://api.jquery.com/appendTo/

Answer 3

我的一分钱 - 使用clone复制td然后移动tds，以便保留附加到它们的事件（如果有的话）。

Answer 4

尝试

var $rows = $('#myTableID tr');

$rows.slice(0, Math.ceil($rows.length / 2)).each(function () {
    var $this = $(this),
        index = $this.index();
    $this.append($rows.eq(index * 2).find('td'))
    $this.append($rows.eq(index * 2 + 1).find('td'))
})

演示：Fiddle

Answer 5

这是您可以通过单击按钮

创建/替换表格的其他选项

max = 2

$("button").click(function() {
    var tr = $("table tr:last");
    if(!tr.length || tr.find("td").length >= max)
        $("table").append("<tr>");
    $("table tr:last").append("<td>hi</td>");
});

<table border=1></table>
<button>hi</button>

Answer 6

var all_td = $('#myTableID tr').map(function () {
    return $(this).html();
}).get();
$('#myTableID tr').empty().each(function(i){
    var ret  = all_td.slice(i*2,++i*2);
    $(this).html(ret);
});

Fiddle Demo

<小时/> 每个tr都有两个td

Jquery：如何将TD转移到另一个TR？

6 个答案: