Css 使用jquery搜索文本匹配时,如何突出显示表格网格中的选定行?
在表格网格中显示行值。每当用户搜索特定记录时,我需要检查文本是否与任何行匹配。如果匹配,则记录需要更改行的背景颜色。如果不匹配,则需要显示网格行的原始颜色 请检查我的代码,如果记录不匹配,如何显示原始颜色Css 使用jquery搜索文本匹配时,如何突出显示表格网格中的选定行?,css,jquery,Css,Jquery,在表格网格中显示行值。每当用户搜索特定记录时,我需要检查文本是否与任何行匹配。如果匹配,则记录需要更改行的背景颜色。如果不匹配,则需要显示网格行的原始颜色 请检查我的代码,如果记录不匹配,如何显示原始颜色 $(function () { grid = $('#userGrid'); // handle search fields key up event $('#search-term').keyup(function (e) {
$(function () {
grid = $('#userGrid');
// handle search fields key up event
$('#search-term').keyup(function (e) {
text = $(this).val(); // grab search term
if (text.length > 1) {
// grid.find('tr:has(td)').hide(); // hide data rows, leave header row showing
// iterate through all grid rows
grid.find('tr').each(function (i) {
// check to see if search term matches Name column
if ($(this).find('td:first-child').text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#FC6" });
// $(this).show(); // show matching row
});
}
else
grid.find('tr').show(); // if no matching name is found, show all rows
});
});
设计:
<label for="search-term">Search by Name</label>
<input type="text" id="search-term" />
<table id="userGrid">
<th>
<td>Name</td>
<td>Email</td>
</th>
<tr>
<td>John Smith</td>
<td>john.smith@johnsmith.com</td>
</tr>
<tr>
<td>Sally Sue</td>
<td>sally.sue@sallysue.com</td>
</tr>
</table>
按名称搜索
名称
电子邮件
约翰·史密斯
厕所。smith@johnsmith.com
莎莉·苏
俏皮话sue@sallysue.com
只需将这一行添加到代码中:请参见
grid.find('tr').each(function (i) {
$(this).css({ background: "#FFF" });// <= this line
// check to see if search term matches Name column
if ($(this).find('td:first-child').text().toUpperCase().match(text.toUpperCase()))
$(this).css({ background: "#FC6" });
// $(this).show(); // show matching row
});
grid.find('tr')。每个(函数(i){
$(this.css({background:#FFF});//如果搜索文本为空,则需要显示原始网格。无需显示以前的高亮行记录。欢迎您,这样您可以再次将此行添加到else
块,意思是如果(text.length==0)
grid.find('tr:has(td)).css({background:“”);如何检查所有列。以上仅适用于第一列?您能告诉我如何申请所有列吗?如果假设表格网格中有3列,我需要检查以上所有列,仅使用名称(第一列)进行检查。