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"是我測試出來正常的。以前用""來代替無效。能夠根據本身的狀況來作變化。