i have table several rows , columns , set of search fields. able show / hide rows match / don't match search fields. each field related column of table. have been partly successful in task, because filtering done correctly (as can see here). however, fix 2 things.
- first fact jquery script hides table head.
- secondly, able filter rows type. ex. if type 'j' @ name box, disappears, because there no row name 'j'. however, have got 'james' , 'jamie', potential match. , keep them until name typed. tried
s1.localecompare(s2)(link here), not work.
by way, no need worry uppercase / lowercase typing. take care of in original code, tried keep simple here.
the code here:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function(){ table = $("#mi6"); //set table name search_field = new object(); ///we create object, empty $('.search-key').on('change keyup paste', function () { search_field['name'] = $( "#name" ).val(); search_field['lastname'] = $("#lastname").val(); search_field['number'] = $("#number").val(); table.find('tr').each(function () { current_row = $(this); //keep track of row being checked, iterate through it's cells var display = 0; current_row.show(); $(this).find('td').each(function() { //when stumble upon data used search criteria cell_value = $(this).html(); //gets value of cell being checked if (cell_value == search_field[this.id] || search_field[this.id] == '') { display++; } }); if (display < 3) { current_row.hide(); //if cell match, or no longer want use search criteria, row displayed } }); }); }); </script> </head> <body> <input type="text" id="name" class="search-key" placeholder="name"> <input type="text" id="lastname" class="search-key" placeholder="lastname"> <input type="number" id="number" class="search-key" placeholder="number"> <p></p> <table id="mi6"> <tr> <th>firstname</th> <th>lastname</th> <th>number</th> </tr> <tr> <td id="name">james</td> <td id="lastname">bond</td> <td id="number">7</td> </tr> <tr> <td id="name">vesper</td> <td id="lastname">lynd</td> <td id="number">6</td> </tr> <tr> <td id="name">rene</td> <td id="lastname">mathis</td> <td id="number">5</td> </tr> </table> </body> </html>
to answer first question, omit first row of table collection using .not(':first'):
table.find('tr').not(':first') in order partial string matching, can use indexof().
the indexof() method returns index within calling string object of first occurrence of specified value, starting search @ fromindex. returns -1 if value not found.
i noticed can duplicate ids in markup, must unique.
your script rewritten more dynamic couple of small changes markup:
<td data-input="name">rene</td> <td data-input="lastname">mathis</td> <td data-input="number">5</td> you can use data-input target corresponding input. can combine jquery's filter() method return matching rows:
/* $rows = table.find('tr').not(':first') */ $rows.hide().filter(function() { return $(this).find('td').filter(function() { var tdtext = $(this).text().tolowercase(), inputvalue = $('#' + $(this).data('input')).val().tolowercase(); return tdtext.indexof(inputvalue) != -1; }).length == $(this).find('td').length; }).show(); the above first hides each row, , filters. inside of there, each contained td filtered, comparing text against value of corresponding input. if match found, td returned. checks number of matching td elements against number of td elements in row, if same, fields contain partial match, , entire row returned. finally, matching rows shown.
this way allow add more inputs, , tds without having modify code. you'd have set id on input, , add corresponding data-input td elements.
here's complete example
Comments
Post a Comment