关于表格内容的筛选处理有很多种方法,总体来说可以分为前端和后端两种。1,用带筛选条件的sql语句去查询数据库,得到需要的数据显示在页面上,最好用ajax来实现。2,页面渲染的时候带条件地显示需要的数据。
最近也是碰到了问题,用上述第一种方法行不通,因为表格的包含自定义的checkbox,重新加载过后需要绑定click事件。而用ajax来做的话,绑定事件会在元素加载完成之前就执行。所以不考虑。而用前端筛选也遇到问题。用jstl的与,配合确实能达到筛选效果,无奈本人的项目是使用jsf框架来做的,是用来生成的表格,当用jstl来筛选的时候,即使条件不符合,页面上也会显示该跳数据对应的行,只不过是没内容。
所以如果是用jsp的话,那用jstl标签来做也是完全可以的。但我这里就要采用JavaScript来自己做筛选了。
页面上不多说了,如果是文本框search形式的,监听keyup事件,下拉框形式的,监听onchange事件等等。js的思路就是,遍历表格内容,如果等于所要筛选的字段,那就显示数据;如果不等,则隐藏数据。
隐藏数据,刚开始我是采用{visibility: hidden, position: absolute}的方式:
var category = document.getElementById("categories").value;//所要筛选的字段
var trs = document.getElementById("details").getElementsByTagName("tr");//得到table所有的行(包括head里的)