js实现页面表格筛选

关于表格内容的筛选处理有不少种方法，整体来讲能够分为前端和后端两种。1，用带筛选条件的sql语句去查询数据库，获得须要的数据显示在页面上，最好用ajax来实现。2，页面渲染的时候带条件地显示须要的数据。

最近也是碰到了问题，用上述第一种方法行不通，由于表格的包含自定义的checkbox，从新加载事后须要绑定click事件。而用ajax来作的话，绑定事件会在元素加载完成以前就执行。因此不考虑。而用前端筛选也遇到问题。用jstl的<c:choose>与<c:when>，<c:otherwise>配合确实能达到筛选效果，无奈本人的项目是使用jsf框架来作的，是用<h:datatable>来生成的表格，当用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里的)
for(var i = 1; i < trs.length; i++){//除去head里的tr，因此从1开始遍历
	var flag = category == "all" || (trs[i].getElementsByTagName("td"))[2].innerHTML == category;//显示或隐藏数据的条件
	trs[i].style.visibility = flag ? "visible" : "hidden";
	trs[i].style.position = flag ? "relative" : "absolute";//隐藏数据
}

这样的方式在ie, chrome下表现正常，但在firefox下兼容性有点小问题，筛选完以后表格内的边框消失了。因而采用下面的隐藏方式：

var category = document.getElementById("categories").value;//所要筛选的字段
var trs = document.getElementById("details").getElementsByTagName("tr");//获得table全部的行(包括head里的)
for(var i = 1; i < trs.length; i++){//除去head里的tr，因此从1开始遍历
	var flag = category == "all" || (trs[i].getElementsByTagName("td"))[2].innerHTML == category;//显示或隐藏数据的条件
	trs[i].style.display = flag ? "table-row" : "none";//隐藏数据
}

固然这里的显示"table-row"是我测试出来正常的。以前用""来代替无效。能够根据本身的状况来作变化。