如何突出顯示與jquery匹配的所有列

Question

我有以下代碼：

var toHighlight = $('th').filter(function(){return $(this).text() == max})

var col = $(toHighlight).index();
$("td, th").filter(":nth-child(" + (col + 1) + ")").css("background-color", "gold")

其目的是找到編號最高的列並更改背景顏色。 它做得很好。 我的問題是，如果有多列包含最高的數字，我希望它更改所有顏色。 現在，它只會執行找到的第一個。

如何更改此值以更改所有匹配max的列的背景顏色？

Answer 1

@Mamun是正確的，您需要遍歷toHighlight。 要突出顯示完整的列，您只需要獲取每列的索引，然后在該列中設置所有“ td，th”即可。

鑒於此HTML：

<table>
<tr>
  <th>1</th>
  <th>7</th>
  <th>3</th>
  <th>7</th>
</tr>
<tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
</tr>
</table>

它將使用以下JS：

var max='7';
var toHighlight = $('th').filter(function(){return $(this).text() == max});

$(toHighlight).each(function(a, colItem){
   var col = $(colItem).index();
   $("td, th").filter(":nth-child(" + (col + 1) + ")").css("background-color", "gold");
});

這是一個小提琴： https : //jsfiddle.net/yd4c013j/

Answer 2

您必須要使用each()來迭代已過濾的tr 。
然后，您可以使用代碼輕松突出顯示所有元素。
（你很近）

這是一個工作片段：

 // I've done like max was a text. var toHighlight = $('th').filter(function() { return $(this).text() == 'max' }); $(toHighlight).each(function() { var col = $(this).index(); $("td, th").filter(":nth-child(" + (col + 1) + ")").css("background-color", "gold"); }) 

 td { border: 1px solid black; padding: 8px 32px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <th>x</th> <th>max</th> <th>x</th> <th>max</th> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table> 

希望對您有所幫助。