spesificクラスを持つ列番号を取得し、それを使ってテーブルを反復処理する方法

theadセクションにヘッダーを持つテーブルがあります。spesificクラスを持つ列番号を取得し、それを使ってテーブルを反復処理する方法

テーブルヘッダクラスselectmeを持つすべてのテーブルtdにクラスcolourmeを追加する必要があります。最初のヘッダだけがこのクラスを持っているので、私は何とか特定のクラスで列番号を取得し、ここではクラスとその下の同じ列番号でcolourme

を行列を移入する必要が私のコードです：

<html> 
<head> 
<style> 
td, th { 
    border: solid 1px black; 
} 
</style> 
<body> 
<table id="mytable" > 
<thead> 
    <tr> 
     <th rowspan="3">Person</th> 
     <th>Day 1</th> 
     <th>Day 2</th> 
     <th>Day 3</th> 
     <th class="selectme">Day 4</th> 
     <th class="selectme">Day 5</th> 
     <th>Day 6</th> 
     <th>Day 7</th> 
    </tr> 
    <tr> 
     <th>Mon</th> 
     <th>Tue</th> 
     <th>Wed</th> 
     <th>Thu</th> 
     <th>Fri</th> 
     <th>Sat</th> 
     <th>Sun</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Peter</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>Paul</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    </tbody> 
<tfoot> 
    <tr> 
     <th>Total:</th> 
     <th>4</th> 
     <th>4</th> 
     <th>4</th> 
     <th>4</th> 
     <th>4</th> 
     <th>4</th> 
     <th>4</th> 
    </tr> 
</tfoot> 
</table> 
</body> 
</html>

出典

2016-04-15 greay

あなたはselectmeをループとbody要素を選択することができます使用してnth-child

$('#mytable thead .selectme').each(function(i) { 
 
    $('#mytable tbody td:nth-child(' + ($(this).index() + 1) + ')').addClass('colourme') 
 
})

td, 
 
th { 
 
    border: solid 1px black; 
 
} 
 
.selectme, 
 
.colourme { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="3">Person</th> 
 
     <th>Day 1</th> 
 
     <th>Day 2</th> 
 
     <th>Day 3</th> 
 
     <th class="selectme">Day 4</th> 
 
     <th class="selectme">Day 5</th> 
 
     <th>Day 6</th> 
 
     <th>Day 7</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Mon</th> 
 
     <th>Tue</th> 
 
     <th>Wed</th> 
 
     <th>Thu</th> 
 
     <th>Fri</th> 
 
     <th>Sat</th> 
 
     <th>Sun</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Peter</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Paul</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr> 
 
     <th>Total:</th> 
 
     <th>4</th> 
 
     <th>4</th> 
 
     <th>4</th> 
 
     <th>4</th> 
 
     <th>4</th> 
 
     <th>4</th> 
 
     <th>4</th> 
 
    </tr> 
 
    </tfoot> 
 
</table>

出典

2016-04-15 13:36:25

spesificクラスを持つ列番号を取得し、それを使ってテーブルを反復処理する方法

答えて

関連する問題