Question

我想使用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

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>

Answer 2

试试这个，

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

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

Answer 3

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

因此，如果您确定TH 1041051600000需要样式，请发现它是行中的第一个，并使用该数字来设置TD行的样式。

Answer 4

在这里，你去看看，看看它是否有助于你

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

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

4 个答案: