[JQuery] Table front-end search compatible with IE6 and jqueryie6 table front-end

[JQuery] Table front-end search compatible with IE6 and jqueryie6 table front-end

This applies to table search on the current page. The idea comes from [JavaScript] using the sort () function and file fragments to sort the table's front-end, compatible with IE6 ecosystem (click to open the link ), originally intended to use pure JavaScript without any plug-ins, but helpless JavaScript cannot independently operate the tbody node, clear the data in the tbody node, can only pull jQuery help. The following code is a mix of JavaScript and Jquery.

We plan to achieve the following results:

This is IE6 of IETest

Enter a keyword in the search box, as long as the corresponding column in the table contains this keyword, it is displayed.

If you do not enter anything in the search box, all results are displayed.

First, it is a very simple HTML layout.

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> There is nothing to say.

Introduce Jquery1.11.
In a search input box and a search button, The onclick event is the search function.
A table. Set the header thead node and table content tbody node.
Because the tbody node does not operate during the search.
Followed by the core script. For details, see notes:

<Script type = "text/javascript"> var DataTableHTML = $ ("# myTable" ).html (); // when loading a webpage, save the search content of the table, the table will be filled with the search results later. Function search () {var searchStr = document. getElementById ("search "). value; // retrieve the content of the search box $ ("# myTable" ).html (DataTableHTML); // first fill the table content when loading the webpage into the table, and then search, otherwise, after multiple searches, the search results will be searched again. Var DataTableBody = document. getElementById ("myTable "). tBodies [0]; // retrieves the tbody content var DataRowsArr = DataTableBody. rows; // retrieves each row of the tbody to form an array. jQuery does not know how to write it. It is implemented in javascript. Var MyArr = new Array (); // create an empty Array to store the row node var MyArrRowsCount = 0 that contains the search content; // The index value of the empty array for (var I = 0; I <DataRowsArr. length; I ++) {// traverse each row of the table var isSearchStrExisted = false; for (var j = 0; j <DataRowsArr [I]. cells. length; j ++) {// traverse each cell in each row var cellInnerHTML = DataRowsArr [I]. cells [j]. innerHTML + ""; // retrieves the cell content if (cellInnerHTML. indexOf (searchStr)>-1) {// if it contains the search content entered by the user, MyArr [MyArrRowsCount] = DataRowsArr [I]; // MyArrRowsCount ++ in the empty array to be added; // index + 1 }}(ableablebody#.html (""); // use jQuery to clear the original tbody. Javascript cannot be used here ...... Var frag = document. createDocumentFragment (); // create a File Fragment for (var I = 0; I <MyArr. length; I ++) {frag. appendChild (MyArr [I]); // Add all rows matching the search results to the File Fragment} DataTableBody. appendChild (frag); // put the file fragments into tbody} </script>