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

示例小提琴

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

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

如何：使用 jQuery 更改表格的行和列颜色

于 2012-11-16T16:20:10.130 回答
0

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

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

于 2012-11-16T16:14:42.060 回答