JS Implementation Page Table Filter

There are many ways to filter the contents of a table, which can be divided into two types: front end and back end. 1, using SQL statements with filter criteria to query the database, get the data needed to display on the page, it is best to use Ajax to achieve. 2. When the page renders, the required data is displayed conditionally.

Also recently encountered a problem, with the first method above does not work, because the table contains a custom checkbox, reload after the need to bind the click event. With Ajax, the binding event executes before the element is loaded. So do not consider. and using front-end filtering also encountered problems. With Jstl <c:choose> and <c:when>,<c:otherwise> cooperation can actually achieve the screening effect, but my project is to use the JSF framework to do, is to use

So if it is using JSP, then it is perfectly possible to do it with the jstl tag. But I'm going to use JavaScript to do my own screening here.

The page does not say much, if it is text box search form, listen to the KeyUp event, drop-down box form, listen to onchange events and so on. The idea of JS is to traverse the contents of the table, and if it is equal to the field to be filtered, the data will be displayed;

Hide the data, just at first I was using {Visibility:hidden, position:absolute} way:

var category = document.getElementById ("categories"). value;//the field to filter var TRS = document.getElementById ("Details"). getElementsByTagName ("tr");//Get All rows of table (including the head) for (var i = 1; i < trs.length; i++) {//Remove the TR in head, so start from 1 to traverse VAR flag = Category = = "All" | | (Trs[i].getelementsbytagname ("TD")) [2].innerhtml = = category;//conditions for displaying or hiding data Trs[i].style.visibility = flag? "Visible": "hidden"; trs[i].style.position = flag? "Relative": "absolute";//Hide Data}

This way in IE, chrome under the normal performance, but in Firefox compatibility a little problem, after filtering the table inside the border disappears. Then use the following hidden methods:

var category = document.getElementById ("categories"). value;//the field to filter var TRS = document.getElementById ("Details"). getElementsByTagName ("tr");//Get All rows of table (including the head) for (var i = 1; i < trs.length; i++) {//Remove the TR in head, so start from 1 to traverse VAR flag = Category = = "All" | | (Trs[i].getelementsbytagname ("TD")) [2].innerhtml = = category;//conditions for displaying or hiding data Trs[i].style.display = flag? "Table-row": "None";//Hide Data}

Of course the display "Table-row" Here is my test out normal. Replace the invalid with "" earlier. You can make changes according to your own situation.

JS Implementation Page Table Filter