layui中table实现已有列表检索

最新推荐文章于 2024-04-23 09:49:03 发布

原创最新推荐文章于 2024-04-23 09:49:03 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

LayUI 专栏收录该内容

3 篇文章

订阅专栏

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

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();
}
  });

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