『前端日志』基于Bootstrap框架实现组合筛选表格数据的功能

最新推荐文章于 2025-09-14 01:11:10 发布

原创

最新推荐文章于 2025-09-14 01:11:10 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery #javascript

这篇博客介绍如何利用HTML、jQuery和JavaScript，结合Bootstrap框架，实现对表格数据的组合筛选。通过从JSON文件中获取数据，创建数组对象，并根据两个下拉框和一个输入框的值进行比对，实现匹配数据行的显示，非匹配行隐藏。

目标：根据两个下拉框和一个输入框的内容，对BootStrap Table实现组合筛选。

思路：1.从json文件中，提取表格数据（前端提取），并存储为一个数组对象；2.遍历这个数组，提取用来对比的属性的值；3.与下拉框和输入框中取到的值进行比对，相同的数据行留下，不同的隐藏（注意下拉框中会有一项是All）

代码：

html部分：

  <!--下拉框插件-->
  <div>
      Dept : 
      <div class="btn-group">
          <select id="jobListDept" class="form-control" onchange="jobListScreen()">
              <option class="active"><a href="#">All</a></option>
              <option><a href="#">ADMIN</a></option>
              <option><a href="#">DEV1</a></option>
              <option><a href="#">DEV2</a></option>
              <option><a href="#">DEV3</a></option>
              <option><a href="#">QA1</a></option>
              <option><a href="#">QA2<