1

特定の TH の背景色を設定しようとしていますが、DataTables の設定でこれを行う簡単な方法が見つかりませんでした。テーブルの開始タグと終了タグのみを使用します。残りは DataTables で。

<table id="myTable"></table>

<script type="text/javascript">
$(document).ready(function(){

    oTable = $("#myTable").dataTable({

        "aaData"      : myTableJsonData, //Working perfect
        "bProcessing" : true,
        "bJQueryUI"   : true,
        "sDom"        : "<'H'f>rt<'F'i>",       

        "aoColumnDefs" : [
            { "aTargets":[0], "mDataProp":"id",   "sTitle":"ID" },
            { "aTargets":[1], "mDataProp":"name", "sTitle":"NAME", "sClass":"name" },
            { "aTargets":[2], "mDataProp":"city", "sTitle":"CITY" }
        ]       
    });
});
</script>

すべての TD を変更したくないため、属性「sClass」は私の場合には適合しません。TH のみです。私は次のような簡単なことを試しました：

// Not work because looks like it is overwritten by jquery UI theme
$("#myTable").closest("thead").find(".name").addClass("bgGreen");

このようなものを設定すると、正常に動作します..しかし、それを避けたかったのです。

<table id="myTable">
    <thead>
        <tr>
           <th></th>
           <th class="bgGreen"></th>
           <th></th>
        </tr>
    </thead>
</table>

助けてくれてありがとう!!

4

3 に答える 3

0

列のインデックス (番号 2、私が見る限り) が既にわかっている場合は、それを使用してbgGreenで th を選択してクラスを適用できます:nth-child()。(リストの n 番目の要素を取得する方法は他にもありますが、これは 1 つの例です。) 

// Child column number known in advance (1-based)
$("#myTable")
  .find("thead th:nth-child(2)")
  .addClass("bgGreen");

事前に列番号がわからない場合は、 を見つけて、<td class="name">それがどの列にあるかを調べることで番号を取得する方法があります。考えられる解決策には、最初の行を単純にループしてクラス<tbody>をチェックすることが含まれる場合があります。name次に、その番号を上記のクエリまたは同様のクエリで使用できます。

于 2012-07-29T18:09:48.647 に答える
0

背景色だけの場合は、なぜ使用しないのですか

$("#myTable")
  .find("thead th:nth-child(2)").css('background-color', 'green');
于 2012-08-01T14:37:21.723 に答える