I have a table and I am hiding some rows. I want to get the first td in all of the rows that are showing. I have the following statement

$("table.SimpleTable tbody tr:visible td:first-child");

this works in FireFox but not in IE any ideas?

I have a table and I am hiding some rows. I want to get the first td in all of the rows that are showing. I have the following statement

$("table.SimpleTable tbody tr:visible td:first-child");

this works in FireFox but not in IE any ideas?

• javascript
• jquery

4 Answers 4

I am running the code on a click event. The html that you have written is pretty much spot on but for the some reason unknown to me it is not working. I have found a work around though. (I am trying to get a comma delimited string of all values in the first td for the visible rows) Anyway the following work around gets the job done.

    var notfirst = false;
    var serials = "";
    var tds = $("table.SimpleTable tbody tr:visible td:first-child");
    for (var i = 0; i < tds.length; i++) {
        var td = $(tds[i]);
        if (td.is(":hidden"))
            continue;
        if (notfirst)
            serials += ",";
        else
            notfirst = true;

        serials += $.trim(td.text());
    }

For some reason the :hidden tag works correctly but not the :visible in IE7

That should work. With HTML that looks like this:

<table class='SimpleTable'> 
  <tr style='display: none;'> 
    <td>test1</td> 
  </tr> 
  <tr> 
    <td>test2</td> 
  </tr> 
  <tr> 
    <td>test3</td> 
  </tr> 
  <tr style='display: none;'> 
    <td>test4</td> 
  </tr> 
  <tr> 
    <td>test5</td> 
  </tr> 
  <tr> 
    <td>test6</td> 
  </tr>   
</table>

Doing this:

$("table.SimpleTable tbody tr:visible td:first-child").css('color','red');

Makes the color red in Firefox, IE7 for me. What does your HTML look like?

Here's what I tested the above on

EDIT: It is very weird to me that you need to do what you're doing right now. You should be able to replace what you have right now with this:

var serials = [];
$("table.SimpleTable tbody tr:visible td:first-child").each(function() {
    serials.push($.trim($(this).text()));
});
var serials = serials.join(',');

If the TDs are being populated from the selector they should only be the visible ones. If you are getting hidden TDs into the serials (which, I must stress, should really not be happening and is a bug or a sign of an error somewhere), try this selector instead:

$("table.SimpleTable tbody tr:not(:hidden) td:first-child")

From documentation:

"How :visible is calculated was changed in jQuery 1.3.2. Element assumed as visible if it and its parents consumes space in document. CSS visibility isn't taken into account."

Maybe this has something to do with it. Try using a class selector or something instead of tr:visible

why don't you split it up a bit?

$("table.SimpleTable").find("tr:visible").find("td:first-child").text()

?