0

私は下の表を持っています。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>
4

2 に答える 2

0

jQuery APIによると: " jQuery の :nth-child(n) の実装は CSS 仕様から厳密に派生しているため、n の値は "1-indexed" であり、カウントが 1 から始まることを意味します。 "

2 番目の問題は、セレクター内のとの間のスペース ( )です。それを解消する必要があります。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/

于 2012-06-22T13:44:05.230 に答える
0

少し短くてシンプル - 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);
});
于 2012-06-22T13:52:21.567 に答える