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

Try :containsExact

http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html

    $.extend( $.expr[":"], {
 containsExact: $.expr.createPseudo ?
  $.expr.createPseudo(function(text) {
   return function(elem) {
    return $.trim(elem.innerHTML.toLowerCase()) === text.toLowerCase();
   };
  }) :
  // support: jQuery <1.8
  function(elem, i, match) {
   return $.trim(elem.innerHTML.toLowerCase()) === match[3].toLowerCase();
  },

 containsExactCase: $.expr.createPseudo ?
  $.expr.createPseudo(function(text) {
   return function(elem) {
    return $.trim(elem.innerHTML) === text;
   };
  }) :
  // support: jQuery <1.8
  function(elem, i, match) {
   return $.trim(elem.innerHTML) === match[3];
  },

 containsRegex: $.expr.createPseudo ?
  $.expr.createPseudo(function(text) {
   var reg = /^\/((?:\\\/|[^\/]) )\/([mig]{0,3})$/.exec(text);
   return function(elem) {
    return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML));
   };
  }) :
  // support: jQuery <1.8
  function(elem, i, match) {
   var reg = /^\/((?:\\\/|[^\/]) )\/([mig]{0,3})$/.exec(match[3]);
   return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML));
  }

});

Answer 2

I too encountered this very same problem as the original author. As Paulo the original question poser had. Which selector can I use to match elements based equality check on element contents. At least I presume that's what he did (as did I) try to achieve and that would also explain why he (as well as I) can't use contains for the obvious reasons ra170 pointed out in his comment. Anyhow if someone happens to stumble here looking for the answer to that question here's the short answer to it:

jQuery has no such matcher by default. The solution is to define your own matcher. To tackle the problem at hand see this excellent blog post by Motte.

Answer 3

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.

Answer 4

$('#servertable td')

will find all td elements, but it's not entirely clear what you expect.

Answer 5

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.