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>

私がやりたいのは、次のように2つの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>
4

5 に答える 5

6

これが実際の例です：http：//jsfiddle.net/65XaF/

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

注：この回答の後、質問は複数のA＆Bグループを反映するように更新されました。

于 2012-11-28T03:12:00.093 に答える
2

最初のテーブルを保持し、データを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'));
});

<ahref="http://jsfiddle.net/szfrd/3/"rel="nofollow">フィドル

または、JosephSilberが提案しているものにもう少し似ています。

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

PSDOMとのやり取りは非常にコストがかかります。大量のデータを操作する場合は、最初に要素を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 に答える