jquery to find all exact td matches

Question

$('#servertable td:eq(' + server + ')')

this finds only 1 (first I think) match, how to find all matches. btw. td:contains will not work for me.

Answer 1

eq expects a numerical index to only return a single row. If you want to match a td by its contents, you have to use the :contains selector. Saying "it doesn't work" and throwing it away is not the right approach to the problem, as the selector is (most likely) not at fault (Do note its case sensitive, which might be it...)

Anyhow, if you have a table like this:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
  <tr>
    <td>World</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

This jQuery code:

$(function() {
    $("td:contains('Hello')").css('color','red');
});

Will turn all cells with "Hello" to red. Demo.

If you need a case insensitive match, you could do this, using the filter function:

$(function() {
    var search = 'HELLO'.toLowerCase();
    $("td").filter(function() {
        return $(this).text().toLowerCase().indexOf(search) != -1;
    }).css('color','red');
});   

If you need to match the exact contents of the cell, you could use something similar to the above:

$(function() {
    var search = 'HELLO'.toLowerCase();
    $("td").filter(function() {
        return $(this).text().toLowerCase() == search;
    }).css('color','red');
});

The above is case insensitive (by turning both the search and the contents to lower case when comparing) otherwise you can just remove those if you want case sensitivity. Demo.

Answer 2

I could be wrong, but the :eq positional selector takes an integer n an finds the nth matching element.

So if you said td:eq(1) -- you'd get the 2nd TD element in the table (second because the first index is zero/0).

My guess is that you don't want to use the :contains selector because you're looking for an exact string match and don't want partial matches.

I'm not aware that jquery has a built in selector that will meet your needs (if so, please correct me). You could add one as an extension or use another method, such as an attribute selector to do the search for you.

If you are able to control the generated HTML, you could add an ID attribute to each TD like so:

   <table id="servertable" border="1">
        <thead>
            <tr><th>Server</th><th>Memory</th></tr>
        </thead>
        <tbody>
            <tr><td id="server_mars">Mars</td><td>4 GB</td></tr>
            <tr><td id="server_venus">Venus</td><td>1 GB</td></tr>
            <tr><td id="server_jupiter">Jupiter</td><td>2 GB</td></tr>
            <tr><td id="server_uranus">Uranus</td><td>8 GB</td></tr>
            <tr><td id="server_mars_2010">Mars_2010</td><td>4 GB</td></tr>
        </tbody>
    </table>
    <form>
        <label for="server">Find:</label><input type="text" id="server" />
        <button id="find">Find</button>
    </form>

The following attribute selector would locate the correct TD in the table:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
        $("#find").click(function() {
            var server = $("#server").val();
            $("#servertable td").css("background-color", "");  // reset 
            $("#servertable td[id='server_" + server.toLowerCase() + "']").css("background-color", "#FFFF00");  
            return false;
        });
    });
   </script>

If you instead want to target the entire row that has the TD that you're looking for, you can add additional selectors:

      $("#servertable tbody tr").css("background-color", "");
      $("#servertable tbody tr:has(td[id='server_" + server.toLowerCase() + "'])").css("background-color", "#FFFF00");

The tbody tag isn't completely necessary, it just helps to distinguish between rows in the table body and rows in the table header.