[英]How do I highlight all columns matching a number with jquery
我有以下代码:
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的列的背景颜色?
@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/
您必须要使用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>
希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.