如何突出显示与 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>

我希望它有所帮助。