标签：
关于表格内容的筛选处理有很多种方法，总体来说可以分为前端和后端两种。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"是我测试出来正常的。之前用""来代替无效。可以根据自己的情况来做变化。
标签：
原文地址：http://my.oschina.net/u/2411391/blog/504285
