javascript - 如何使用 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");
});

这是一个 fiddle : https://jsfiddle.net/yd4c013j/