javascript - JQuery table filter with text box -
With a text search, the table needs to be filtered out of the table For example, if I have any input element I write the word, so I want to get all the rows in the table that are the content of that word. Place this code in the "head" section of your page:
& lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.11 .0 / jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ (Document) .ready (function () {$ ("# searchInput") Keyup (function () {var val = $ (this) .val (); $ ("# searchTable tr td"). (I) {var content = $ (this) .text (); if (content.toLowerCase) IndexOf (val) == -1) {$ (this) .Parent (.) Hide ();} else { $ (This). Parent (). Show ();}});});}); & Lt; / Script & gt;And suppose your HTML looks:
& lt; Div & gt; & Lt; input type = "text" id = "searchInput" /> & Lt; Table id = "searchTable" & gt; & Lt; TR & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Latest & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Most viewed & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Best & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Chest & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Waste & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Test & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;
Comments
Post a Comment