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

【问题标题】：How to change the background color of a column in html table by th id?如何通过 th id 更改 html 表中列的背景颜色？
【发布时间】：2012-11-05 09:28:44
【问题描述】：

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

Example fiddle

【问题讨论】：

标签： jquery html-table

【解决方案1】：

结合 .index() 和 :nth-child() 选择器

.index()

从匹配的元素中搜索给定的元素。

如果没有参数传递给 .index() 方法，则返回值是一个整数，表示 jQuery 对象中的第一个元素相对于其兄弟元素的位置。

:nth-child()

选择作为其父级的第 n 个子级的所有元素。

由于 jQuery 对:nth-selectors 的实现严格源自 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>

【讨论】：

【解决方案2】：

试试这个，

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

演示： http://jsfiddle.net/U8LxX/2/

【讨论】：

【解决方案3】：

您需要根据表的行确定 TH index，然后将相同的规则应用于具有相同索引的 TDS。

因此，如果您确定 TH 1041051600000 需要样式，请找出它在行中的第一个，然后使用该数字为您的 TD 设置样式。

【讨论】：

【解决方案4】：

给你……读一读，看看它是否对你有帮助

How To: Change the row and column colors of a table using jQuery

【讨论】：