Question

I have the below table. I am trying to get tbody column bgcolors matching with theader bg colors.

Can you please help , as I am not able to achieve this?

Thanks and Regards,

<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

A little bit shorter and simpler – 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);
});