"JQuery"-compatible IE6 table front-end Search

Source: Internet
Author: User

This applies to the case of a table search on the current page. The idea is that "JavaScript" uses the sort () function and file fragmentation to implement the table's front-end ordering, compatible with IE6 (click Open link), originally intended to use pure JavaScript without any plug-in write, However, JavaScript cannot operate the TBODY node independently, emptying the data within the TBODY node, only to pull on jquery to help. So the following code is the way JavaScript is mixed with jquery.

The following effects are intended:


This is Ietest's IE6.

Enter a keyword in the search box, which is displayed if the corresponding column in the table contains the keyword.

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

The first is a very simple layout of HTML.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >There's nothing to say.

Introduce Jquery1.11.

A search input box, a search button, whose onclick event is the search function.

a table. Set the table header thead node with the table content tbody node.

Because the TBODY node is not operational at the time of the search.

Then the core script. For details, please see the note:

<script type= "Text/javascript" > var datatablehtml = $ ("#myTable"). html ();//When loading a Web page, save the search contents of the table,    After a while the search results will populate this table. function search () {var searchstr = document.getElementById ("search"). value;//Remove the contents of the Search box $ ("#myTable"). HTML (Dat        atablehtml);//fill in the table content when the page is loaded, and then search in the search results, or after many searches. var datatablebody = document.getElementById ("myTable"). tbodies[0];//remove contents of tbody var Datarowsarr = datatablebody.rows        ;//Take out each line of tbody to form an array, jquery does not know how to write, this is done in JavaScript. var Myarr = new Array ();//Create an empty array to store the row node with the search contents var myarrrowscount = 0;//The index value of the empty array for (var i = 0; i < Data Rowsarr.length;            i++) {//traversal of 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 = Datarowsar                    R[i].cells[j].innerhtml + "";//Remove the contents of the cell if (Cellinnerhtml.indexof (SEARCHSTR) >-1) {//If it contains the content of the user-entered search, Myarr[myarrrowscount] = DataRowsarr[i];//is added in an empty array myarrrowscount++;//index +1}} $ (datatablebody). h  Tml ("");//use jquery to empty the original tbody, here with JavaScript ... 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 result to the file fragment} Datatablebody.appendchild (Frag);//Put this file fragment on Tbody}</script>

"JQuery"-compatible IE6 table front-end Search

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.