如何通过id更改html表中列的背景颜色？

Question

我想使用jquery来改变列的背景颜色.

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的背景.我想用这个id改变整个列的背景颜色.

示例小提琴

Answer 1

组合.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>