layui中table实现已有列表检索

最新推荐文章于 2024-08-18 10:44:32 发布

茶饭

最新推荐文章于 2024-08-18 10:44:32 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

分类专栏： LayUI

本文链接：https://blog.youkuaiyun.com/asp_lilu/article/details/108073765

LayUI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用layui框架实现表格筛选的示例代码。通过获取输入框的值，遍历表格的每一行，如果某行的ID包含搜索关键词，则显示该行；否则隐藏。这种方法实现了动态的表格数据筛选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var search = $('#key').val();
$('.layui-table-fixed tbody tr').each(function (i) {
//console.log($(this).children('td').eq(1));
var id = $(this).children('td').eq(1).children('div').html();
if (id.indexOf(search)>-1) {
$(this).show()
$('.layui-table-main tbody tr').eq(i).show()
} else {
$('.layui-table-main tbody tr').eq(i).hide()
$(this).hide();
}
  });

通过获取元素，将符合条件的显示，其他内容隐藏