高亮表格行或列

时间:2022-11-20 11:15:14

今天学习jQuery,练习一下对表格进行列或行高亮显示。

我们对下面这个表格来进行。代码是写在ASP.NET MVC程序上Razor语法。

高亮表格行或列


这个需要符合某一条件:只要控制器列的文本为:Railway。

首先添加样式:
高亮表格行或列

 

高亮表格行或列高亮表格行或列
 .highTransport {
background-color
: #0915f3 !important;
color
: #ffffff !important;
}
Source Code

 

只亮某一td:
高亮表格行或列

 

高亮表格行或列高亮表格行或列
$(".trData td.controller").filter(function () {
return $(this).text() == 'Railway';
}).addClass(
'highTransport');
Source Code


效果:
高亮表格行或列

 

另一种情形,需要高亮整行:
高亮表格行或列

 

高亮表格行或列高亮表格行或列
$(".trData").filter(function () {
return $(this).find('.controller').text() == 'Railway';
}).addClass(
'highTransport');
Source Code

 

 运行效果:
高亮表格行或列