1

jQueryを使用して列の背景色をidで変更したいと思います。

htmlテーブル：

<table id="financial_table" style="background-color:#EEE;">
   <tbody>
      <tr>
         <th>Date</th>
         <th id="1041051600000">12 2002</th>
         <th id="1072587600000">12 2003</th>
         <th id="1104210000000">12 2004</th>
         <th id="1135746000000">12 2005</th>
         <th id="1167282000000">12 2006</th>
         <th id="1198818000000">12 2007</th>
         <th id="1230440400000">12 2008</th>
         <th id="1261976400000">12 2009</th>
         <th id="1293512400000">12 2010</th>
         <th id="1325048400000">12 2011</th>
      </tr>
      <tr>
         <td>Share</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
         <td>16.98</td>
         <td>18.14</td>
         <td>21.2</td>
         <td>22.67</td>
         <td>22.43</td>
         <td>22.38</td>
         <td>23.77</td>
      </tr>
       
       <tr>
         <td>Revenue</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
         <td>16.98</td>
         <td>18.14</td>
         <td>21.2</td>
         <td>22.67</td>
         <td>22.43</td>
         <td>22.38</td>
         <td>23.77</td>
      </tr>
   </tbody>
</table>​

jQuery：

$(function() {
   $('#1135746000000').css('background-color','blue');
});​

idが1135746000000であるthの背景のみを変更できることを知っています。このthidで列全体の背景色を変更したいと思います。

フィドルの例

4

4 に答える 4

9

結合.index()と:nth-child()セレクター

.index()

一致した要素の中から特定の要素を検索します。

メソッドに引数が渡されない場合.index()、戻り値は、兄弟要素に対するjQueryオブジェクト内の最初の要素の位置を示す整数です。

:nth-child()

親のn番目の子であるすべての要素を選択します。

jQueryの:nth-セレクターの実装はCSS仕様から厳密に派生しているため、の値nは「1-indexed」です。これは、カウントが1から始まることを意味します。

考えられる解決策は次のようになります。

// get the index of the column
var colIdx = $("#1041051600000")​​.index();

// grab all <td> and <th> elements from the (colIdx + 1) column
$("td, th").filter(":nth-child(" + (colIdx + 1) + ")")
           .css("background-color", "red")​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​;


var colIdx = $("#1041051600000").index();

$("td, th").filter(":nth-child(" + (colIdx + 1) + ")")
           .css("background-color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tbody>
      <tr>
         <th>Date</th>
         <th id="1041051600000">12 2002</th>
         <th id="1072587600000">12 2003</th>
         <th id="1104210000000">12 2004</th>
      </tr>
      <tr>
         <td>Share</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
      </tr>
       <tr>
         <td>Revenue</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
      </tr>
   </tbody>
</table>

于 2012-11-16T16:17:38.570 に答える
2

これを試して、

$('#1135746000000, td:nth-child('+($("#1135746000000").index()+1)+')').css('background-color','blue');

デモ： http： //jsfiddle.net/U8LxX/2/

于 2012-11-16T16:23:58.390 に答える
0

テーブルの行に関してTHインデックスを決定してから、同じインデックスを持つTDSに同じルールを適用する必要があります。

したがって、TH 1041051600000にスタイリングが必要であると判断した場合は、それが行の最初のものであることを確認し、その番号を使用して、行を下るTDのスタイルを設定します。

于 2012-11-16T16:14:42.060 に答える
0

どうぞ...これを読んで、それがあなたを助けるかどうか見てください

方法：jQueryを使用してテーブルの行と列の色を変更する

于 2012-11-16T16:20:10.130 に答える