jQuery 突出显示表格行中的匹配元素是一种常见的 UI 交互模式,它允许用户在输入框中输入内容时,自动高亮显示表格中包含匹配文本的行。这种功能通常用于数据筛选和快速定位。
$(document).ready(function() {
// 监听输入框的变化
$('#searchInput').on('input', function() {
var searchText = $(this).val().toLowerCase();
// 遍历表格行
$('table tbody tr').each(function() {
var rowText = $(this).text().toLowerCase();
// 检查行文本是否包含搜索文本
if (rowText.indexOf(searchText) !== -1) {
$(this).addClass('highlight'); // 添加高亮类
} else {
$(this).removeClass('highlight'); // 移除高亮类
}
});
});
});
.highlight {
background-color: #ffeb3b; /* 黄色背景 */
font-weight: bold; /* 加粗字体 */
}
原因:JavaScript 的字符串比较默认区分大小写
解决方案:使用 toLowerCase()
或 toUpperCase()
统一大小写
var searchText = $(this).val().toLowerCase();
var rowText = $(this).text().toLowerCase();
原因:表格行数过多时,逐个遍历性能较差
解决方案:
// 使用防抖
var debounceTimer;
$('#searchInput').on('input', function() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function() {
// 搜索逻辑
}, 300); // 延迟300毫秒
});
原因:默认搜索了整个行的文本
解决方案:指定特定列进行搜索
$('table tbody tr').each(function() {
var cellText = $(this).find('td:nth-child(2)').text().toLowerCase(); // 只搜索第二列
// 其余逻辑相同
});
$('#searchInput').on('input', function() {
try {
var regex = new RegExp($(this).val(), 'i'); // 不区分大小写
$('table tbody tr').each(function() {
var rowText = $(this).text();
$(this).toggleClass('highlight', regex.test(rowText));
});
} catch(e) {
// 处理无效正则表达式
}
});
$('#searchInput').on('input', function() {
var searchText = $(this).val().toLowerCase();
$('table tbody tr').each(function() {
var matchFound = false;
$(this).find('td.searchable').each(function() { // 只搜索有searchable类的列
if ($(this).text().toLowerCase().indexOf(searchText) !== -1) {
matchFound = true;
return false; // 退出each循环
}
});
$(this).toggleClass('highlight', matchFound);
});
});
通过以上方法,您可以实现一个高效、用户友好的表格行高亮功能,提升用户的数据查找体验。
没有搜到相关的文章