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。“

第二个问题是选择器中和td之间的空格（nth-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);
});

jquery bgcolor与tbody匹配

2 个答案: