jquery - Highlight the table cells based on textbox value -
i want highlight table cells having similar value textbox; i.e. user starts typing letters should highlight table cells....
<input type="text" id="txtsearch"/> <html> <table id="table" style="height:350px;margin-left:1em;width:700px;"> <!--this table header--> <tr style="display:table-row"> <th class="checkbox"><input type="checkbox"/></th> <th class="name">name</th> <th class="score">score</th> <th class="email">email</th> <th class="empty"></th> </tr> <tr> <!--tabledata--> <td ><input type="checkbox" /></td> <td >vijay prakash</td> <td >34</td> <td >vijay@gmail.com</td> <td ></td> </tr> </table> <input type="button" id="btncalculate" value="calculate"/> <label>average:</label> <label id="lblaverage"></label> <label>max:</label> <label id="lblmax"></label> </form> </html> </div>
if want case insensitive contains approach try following:
$("#text-box-id").keyup(function() { var value = $(this).val().tolowercase(); // can add class ones want able // highlight , use $("td.highlightable").each(function(index, elem) { var $elem = $(elem); if (value.length > 0 && $elem.text().tolowercase().indexof(value) != -1) { $elem.css('backgroundcolor', 'yellow'); } else { $elem.css('backgroundcolor', ''); } }); });
Comments
Post a Comment