Question

抱歉刚刚得到更新，tr级A和B重复了很多。我想将每个AB组合成C并显示所有Cs。

我有一张这样的桌子：

<table class="table">
<tbody>
<tr class="A">
<td>11111</td>
<td>22222</td>
<td>33333</td>    
</tr>
<tr class="B">
<td>44444</td>
<td>55555</td>
<td>66666</td>    
</tr>
<tr class="A">
<td>77777</td>
<td>88888</td>
<td>99999</td>    
</tr>
<tr class="B">
<td>10101</td>
<td>11111</td>
<td>22222</td>    
</tr>
</tbody>
</table>

我想要做的是将两个tr组合在一起的一些jQuery，如：

<table class="table">
<tbody>
<tr class="C">
<td>11111</td>
<td>22222</td>
<td>33333</td>    
<td>44444</td>
<td>55555</td>
<td>66666</td>    
</tr>
<tr class="C">
<td>77777</td>
<td>88888</td>
<td>99999</td>    
<td>10101</td>
<td>11111</td>
<td>22222</td>    
</tr>
</tbody>
</table>

Answer 1

以下是一个工作示例：http://jsfiddle.net/65XaF/

$(document).ready(function() {
    var a = $('.A');
    var b = $('.B');
    a
        .append(b.children())
        .removeClass('A')
        .addClass('C');
    b.remove();
});

注意：问题已更新以反映多个A＆amp;答案后B组。

Answer 2

要保留第一个表并将数据插入到第二个表中，您可以执行以下操作：

var c = $('.C');

c.append($('.A').children().clone());
c.append($('.B').children().clone());

http://jsfiddle.net/mA88C/

Answer 3

一衬垫：

$('.A,.B').remove().children('td').appendTo($('<tr />', {'class':'C'})
                                  .appendTo('table'));

FIDDLE

由于问题刚刚改为包含多个相同类的出现，因此修改后的版本将与问题中的新HTML一起使用：

$('.A').each(function() {
    $(this).add($(this).next('.B')).remove().children('td')
           .appendTo($('<tr />', {'class':'C'})
           .appendTo('table'));
});

FIDDLE

或者更像是约瑟夫·西尔伯所建议的：

$('.A').each(function() {
    $(this).append($(this).next('.B').remove().children()).prop('class','C');
});

Answer 4

这是一个更高效的单行：

$('.A').prop('class', 'C').append( $('.B').remove().children() );

这是小提琴：http://jsfiddle.net/dAJ4L/

如果你有倍数，请使用：

$('.A').each(function() {
    $(this).prop('class', 'C').append( $(this).next().remove().children() );
});

这是小提琴：http://jsfiddle.net/bMHNv/

...如果你能克服对单行的痴迷，你应该缓存$(this)：

$('.A').each(function() {
    var $this = $(this);
    $this.prop('class', 'C').append( $this.next().remove().children() );
});

这是小提琴：http://jsfiddle.net/bMHNv/1/

P.S。与DOM的任何互动都非常昂贵。在操作大量数据时，建议您首先从DOM中分离元素，进行操作，然后重新添加。因此，对于性能必杀技，您应该先从DOM .detach()获取表操纵它：

var $table = $('.table').detach();

$table.find('.A').each(function() {
    var $this = $(this);
    $this.prop('class', 'C').append( $this.next().remove().children() );
});

// Insert the table back into the DOM.
// Since I don't know your DOM structure, I can't help you out with this.
// You'll have to figure it out on your own.

最后，这是小提琴：http://jsfiddle.net/bMHNv/2/

Answer 5

这是另一种方法。

var allTds = $('.table > tbody > tr > td');  // Get all the TD's
$("tbody").html("<tr class='C'></tr>");      // Add the TR C Class
$(".C").html(allTds);                        // Add the TD's

jQuery将两个tr类合并为一个

5 个答案: