javascript - ヘッダー行のみに基づいてjqueryのものを適用するにはどうすればよいですか？

Question

私はこのようなテーブルを持っています：

<table> 
<thead>
   <th>id </th><th>name </th><th>number </th><th>result </th> 
</thead>        
<tbody>
<tr>
 <td>stuff</td>
 <td>stuff</td>
 <td>stuff</td>
 <td>stuff</td> 
</tr>
</tbody>
 </table>

ヘッダーclass = "red"が_tdresult

したがって、ページが読み込まれるときに動的にjqueryを含む結果列のみが表示されます。

Answer 1

を使用してヘッダーのインデックスを取得し、セレクター.index()を使用してクラスを適用できます。:nth-child

jsFiddle

var resultHeaderIndex = $('th:contains("result")').index();
$('td:nth-child(' + (resultHeaderIndex + 1) + ')').addClass('red')

---

クラスをヘッダーにも追加したい場合は、インデックスを取得する前にクラスを追加するだけです。

jsFiddle

var resultHeaderIndex = $('th:contains("result")')
    .addClass('red')
    .index();
$('td:nth-child(' + (resultHeaderIndex + 1) + ')').addClass('red')

Answer 2

jQuery.index()を使用すると.eq()、これを非常に簡単に行うことができると思います。

(function($){
    $.fn.colorColumn = function(headerText, color){
        var index = this.find("th").filter(function(){
            return ($(this).text() == headerText);
        }).css("backgroundColor", color).index();
        this.find("tr").each(function(){
            $(this).children().eq(index).css({backgroundColor: color});
        })
    }
})(jQuery);

$("table").colorColumn("number", "red");

作業デモ： http： //jsfiddle.net/pitaj/eG5KE/

Answer 3

私がそれを行う方法は、条件付きとjQueryを使用することですeach：

$("th").each(function() {
    if ($(this).text() === "result") { $(this).addClass('red') }
}