jquery-highlight the table cells based on textbox value

I want to highlight the table cells having the similar value as textbox ie as the user starts typing letters itself it should highlight the table cells....

<input type="text" id="txtsearch"/>  
<html>
<table id="table" style="height:350px;margin-left:1em;width:700px;">
    <!--this is my 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> 

Answers


If you want a case insensitive contains approach you could try the following:

    $("#text-box-id").keyup(function() {
        var value = $(this).val().toLowerCase();
        // you can add a class to the ones you want to be able to 
        // highlight and use like this
        $("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', ''); 
            }
        });
    });

http://jsfiddle.net/3leven11/s4tRu/2/


use keyup() and :contains.

try this:

 $('#textBoxID').keyup(function(){
     $('td').css("background-color",''); 
     var value= $(this).val();
     $('td:contains("'+value+'")').css("background-color",'red');
 });

updated

I am creating a new method containsIN which works like jQuery contains and make it case insensitive:

 $.extend($.expr[":"], {
   "containsIN": function(elem, i, match, array) {
      return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] ||  "").toLowerCase()) >= 0;
    }
 });

  $('#textBoxID').keyup(function(){
      $('td').css("background-color",''); 
     var value= $(this).val();
     $('td:containsIN("'+value+'")').css("background-color",'red');
 });

working fiddle


Need Your Help

PHP multiplication weird behavior

php if-statement operators multiplication

I don't know if I have suffered some brain or sight damage, but I can't understand behavior of this code:

Covariance Matrix of an Ellipse

matlab image-processing matrix covariance ellipse

I've been trying to solve a problem. I'm surprised I haven't been able to find anything really useful on the net.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.