后表排序器不应用表css样式
本文关键字:css 样式 应用 排序 | 更新日期: 2024-10-24 11:36:52
我为页面中的表应用了表分类器css样式。如果文本框输入的数据与表格网格数据的任何列匹配,需要为该行应用不同的颜色,我还需要为行应用另一种样式。
$(function () {
grid = $('#tblsearchresult');
// handle search fields key up event
$('#search-term').keyup(function (e) {
text = $(this).val(); // grab search term
if (text.length > 1) {
// iterate through all grid rows
grid.find('tr').each(function (i) {
if ($(this).find('td:eq(1)').text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(2)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(3)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
if ($(this).find("td:eq(4)").text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#A4D3EE" });
});
}
else {
grid.find('tr:has(td)').css({ background: "" });
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
<table id="tblsearchresult" class="tablesorter"">
<thead>
<tr>
<th>ApplicationName</th>
</tr>
</thead>
<tbody>
<% foreach (var request in Model.ApplicationRoles)
{ %>
<tr>
<td>
<span id="appName_<%: request.Id%>">
<%: request.Application.Name%></span>
</td>
</tr>
</tbody>
</table>
表格分类器css:
table.tablesorter {
font-family:arial;
color: rgb(51, 51, 51);
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #8dbdd8;
border: 1px solid #FFF;
font-size: 8pt;
padding: 5px;
}
table.tablesorter thead tr .header:not(.nosort) {
background-image: url('/sorter/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
background-color: rgb(239, 243, 251);
padding: 5px;
border: solid 1px #e8eef4;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp:not(.nosort) {
background-image: url('/sorter/asc.gif');
}
table.tablesorter thead tr .headerSortDown:not(.nosort) {
background-image: url('/sorter/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
.divpager
{
display: inline-block;
float: left;
}
当用任何表格网格行数据搜索文本时,我无法应用匿名函数行颜色。请告诉我。
试试这个代码(演示):
$(function () {
grid = $('#tblsearchresult tbody');
// handle search fields key up event
$('#search-term').on('keyup search', function (e) {
text = $(this).val().toUpperCase(); // grab search term
if (text.length > 1) {
// iterate through all grid rows
grid.find('tr').each(function (i) {
var found = false;
$(this).children().each(function(j){
if (this.textContent.toUpperCase().match(text)) {
$(this).addClass('result');
found = true;
}
});
$(this).toggle(found);
});
} else {
grid.find('td').removeClass('result');
grid.find('tr').show();
} // if no matching name is found, show all rows
});
});
$('table').tablesorter();