jquery - jquery bgcolor 与 tbody 匹配

Question

我有下表。我正在尝试让 tbody 列 bgcolors 与 theader bg 颜色匹配。

你能帮忙吗，因为我无法做到这一点？

谢谢并恭祝安康，

<table id="one" border="1">  <thead>  <tr>
 <th style="background-color:Lime">Header 1</th>
 <th>Header 2</th>  </tr>  </thead>  <tbody>  <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>  </tr>  <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>  </tr>  </tbody>  </table>   
 <script language="javascript" type="text/javascript">
     $(document).ready(function () {

         $('#one thead tr th').each(function () {

             var col1 = $(this).css("background-color");
             var index = $(this).closest("th").prevAll("th").length;

             assigncolr(col1, index);
         });
     });

    function assigncolr(col,index){   $('#one tbody tr').each(function () {
    $(this).find('td :nth-child(' + index + ')').css("background-color", col);


        }
          )
              };

 </script>

Answer 1

根据jQuery API：“因为 jQuery 的 :nth-child(n) 实现严格源自 CSS 规范，所以 n 的值是“1-indexed”，这意味着计数从 1 开始。 ”

第二个问题是选择器之间的空格 ( ) 。你需要消除它。tdnth-child

改变：

$(this).find('td :nth-child(' + index + ')').css("background-color", col);

到：

$(this).find('td:nth-child(' + (index + 1) + ')').css("background-color", col);

这应该可以解决问题。

工作小提琴：http: //jsfiddle.net/WNscb/

Answer 2

更短更简单一点 - http://jsfiddle.net/9X4FP/1/

var cols = $("th").length;

$("tbody td").each(function() {
    var order = $("td").index(this) % cols;
    var color = $("th:eq(" + order + ")").css("background-color");

    $(this).css("background-color", color);
});