3

次のhtmlがあるとしましょう：

<table>
    <thead>
        <tr>
            <th class="alignRight">Header1</th>
            <th>Header2</th>
            <th class="alignLeft">Header3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1</td> //Add class="alignRight"
            <td>Row1</td>
            <td>Row1</td> //Add class="alignLeft"
        </tr>
        <tr>
            <td>Row2</td> //Add class="alignRight"
            <td>Row2</td>
            <td>Row2</td> //Add class="alignLeft"
        </tr>
        <tr>
            <td>Row3</td> //Add class="alignRight"
            <td>Row3</td>
            <td>Row3</td> //Add class="alignLeft"
        </tr>
    </tbody>
</table>

THEAD の TR にクラス「alignRight」または「alignLeft」が含まれている場合、同じクラスを TBODY の対応する TD に適用したいと考えています。

私はJQueryを使用しており、次のことを試しましたが、どれも正しく機能していないようです:

$('tr').has('th.alignRight').addClass('th.alignRight');
$('tr').has('th.alignLeft').addClass('th.alignLeft');

$('thead.tr').has('th.alignRight').addClass('tbody.th.alignRight');
$('thead.tr').has('th.alignLeft').addClass('tbody.th.alignLeft');

if ($('thead.tr').has('th.alignRight')){
    $('tbody.tr').addClass('th.alignRight');
}

if ($('thead.tr').has('th.alignRight')){
    $('tbody.tr.td').addClass('alignRight');
}

何が間違っている可能性がありますか？

アップデート：

.each() ループを使用してテーブルを既に反復処理していることを追加したいと思います。現在のテーブル ヘッダーにそのクラスがある場合は、同じクラスをテーブル セルに追加するという条件を追加するだけです。現在の反復中に余分な反復を追加すると、パフォーマンスの問題が発生するように聞こえます。本当？

ループ：

function(res) {
    var tbl_body = "";
    $.each(res, function () {
        var tbl_row = "";
        $.each(this, function (k, v) {

          //Irrelevant code

            tbl_row += "<td>" + v + "</td>";
        })
        tbl_body += "<tr>" + tbl_row + "</tr>";
    })
    $("#print").html(tbl_body);
    },
    //Other irrelevant code
4

5 に答える 5

7

jqueryセレクターがどのように機能するかわかりません。 $('thead.tr')意味：クラスtheadを持つすべての人を見つけてください。tr明らかにあなたがやりたいことではありません。

ここで動作するはずのコード：

$('tbody tr td').each(function(index){
    //index contains the current td index in the parent tr (1,2,3),(1,2,3)...
    //if the corresponding th has a class
    if($('thead tr th').eq(index).attr('class') != ''){
        //put this class on the current td
        $(this).addClass($('thead tr th').eq(index).attr('class'));
    }
});

td にクラスがあるかどうかを確認する必要はありません。空のパラメーターを指定すると addClass は何もしないためです。

于 2013-11-13T16:23:43.987 に答える
5

試す

$('table thead th[class]').each(function () {
    $('table tbody td:nth-child(' + ($(this).index() + 1) + ')').addClass(this.className)
})

デモ:フィドル

于 2013-11-13T16:21:51.463 に答える
0

ここに解決策があります：（ここでフィドル）

var headrow = $('thead tr').children();
$('tbody tr').each(function(){
  var row = $(this).children();
  for(var i=0; i<headrow.length; ++i){
      if($(headrow[i]).hasClass("alignRight")){
          $(row[i]).addClass("alignRight");
      }
      if($(headrow[i]).hasClass("alignLeft")){
          $(row[i]).addClass("alignLeft");
      }
  }
});
于 2013-11-13T16:28:40.347 に答える
0

addClass 文字列はどれも有効ではありません。className のみを提供するクラスを追加する場合....そこにはありませdotん

/* would add class to the TR*/
$('tr').has('th.alignLeft').addClass('alignLeft');

TD に追加するには、単純にセレクターを使用できます

$('tr th.alignLeft td').addClass('alignLeft');
于 2013-11-13T16:23:15.453 に答える