javascript - How to filter a table and display only values than values? -


I'm working on a simple HTML application that has table grid data

view sample data as follows .

  no name section 1 ABC IT 2 DEF CSE   

I have a search box that will get a search key and display a filtered table view. .

A lot of jazzary tables allow me to implement search logic as follows:

Say I'll search the search key 'ABC' as the following table:

P> Instead of displaying filtered lines, 'ABC' and the entire row as 'IT' or '1' Not be shown.

I only want to match the cells that match the search key that match the keyword as follows:

Say I give the search key as 'ABC' This filtered table should show as follows:

  Name ABC   

You can find Jsfiddle equal to

demo: (firefox)
html

  & lt; Input id = "keyword" & gt; & Lt; div id = "maindiv" & gt; & Lt; Table id = "mytble" & gt; & Lt; TR & gt; & Lt; Th & gt; No & lt; / Th & gt; & Lt; Th & gt; Name & lt; / Th & gt; & Lt; Th & gt; Department & lt; / Th & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 1 & lt; / TD & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; TD & gt; IT & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; B & lt; / TD & gt; & Lt; Td> CSE & lt; / Td> N & lt; / Tr & gt; & Lt; / Table & gt; & Lt; Div & gt;   

JQUERY

  var $ mytbl; var found = false; $ (Document) .ready (function () {$ mytbl = $ ('# mytble') .clone (); $ ("#searchkey") keyboard (function () {found = false; var key = $ (this) .val (); search (key);});}); Function Search (key) {$ mytbl.find ('td'). Each (function (i, v) {if (amp; amp; amp; amp; $ (v) .html ()) contains {var in the name} {var $ th = $ mytbl.find ('th'). ($ (V) .index ()); var $ tbl = $ ('& lt; Table / & gt;'); $ tbl.append ('& lt; tr & gt; & lt; th & gt;' + $ Th.html () + '& lt; / th> & lt; / tr & gt;'); $ tbl.append ('& lt; tr & gt; & lt; TD & gt;' + $ (V) .HTML $ '(' # mytble ') .HTML ($ tbl.html ()); found = true;} and (if (found!) {If (! Key) {$ (' # mytble ' Html (''); $ ('# mytble') .HTML ($ mytbl.html ());} and {var $ tbl = $ ('& lt; table / & gt;'); $ tbl Append ('<'> & lt; th & gt; '+' Result '+'  & lt; / tr & gt; '$' ('# mytble') Html ('' '$' 'TBL .append (' <'> & lt; td & gt;' + 'No matching records' +' & lt; / td & gt; & lt; / Tr & gt;); $ ('# mytble'). Html ($ tbl.html ());}}}};}   

OUTPUT

  section IT    

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -