2

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

我有一张这样的桌子：

<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>

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

<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>
4

5 回答 5

6

Here is a working example: http://jsfiddle.net/65XaF/

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

Note: question was updated to reflect multiple A & B groups after this answer.

于 2012-11-28T03:12:00.093 回答
2

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

var c = $('.C');

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

http://jsfiddle.net/mA88C/

于 2012-11-28T03:17:09.093 回答
1

单线：

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

小提琴

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

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

​<a href="http://jsfiddle.net/szfrd/3/" rel="nofollow"> FIDDLE

或者更像 Joseph Silber 的建议：

$('.A').each(function() {
    $(this).append($(this).next('.B').remove().children()).prop('class','C');
});
于 2012-11-28T03:36:26.343 回答
1

这是一个性能更高的单线：

$('.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/

PS与 DOM 的任何交互都非常昂贵。在操作大量数据时，建议您首先从 DOM 中分离元素，进行操作，然后将其重新添加。因此，为了提高性能，您应该.detach()在操作之前将表从 DOM 中分离出来：

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/

于 2012-11-28T03:50:55.370 回答
0

这是另一种方法。

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
于 2012-11-28T03:31:23.213 回答