views:

198

answers:

6

I have a table with data in:

<td> item </td><td> order code </td><td> price </td>

I'm processing the table with jQuery which needs to find the order code:

$.each($('.productList tbody tr'), function() {
    var orderCode = $(this).find('td:eq(1)').html().trim();
    // do stuff
});

If there are no products, the table shows a message:

<td colspan="3"> There are no products to display </td>

The above row causes the jQuery function to bomb out. What's the most robust way to use a conditional selector to ignore the "no products" row? Is there a selector for colspan="1" or colspan is not set or whatever it would need to be?

Thanks.

+7  A: 

Like this:

$('.productList tbody tr:has(td:nth-child(2))').each(function() {
    ...
});

This will only select <tr> elements that have a <td> that is the second child of its parent. (the nth-child selector is one-based)

SLaks
exactly what I was looking for, thanks
fearofawhackplanet
@Felix: I meant to write that; thanks.
SLaks
@jAndy: what would your prefered solution be?
fearofawhackplanet
@jAndy I agree. There's a more efficient way to handle this.
Josh Stodola
@fearofawhackplanet: see the `jsfiddle` link, the first "benchmark".
jAndy
@fearofawhackplanet See my answer
Josh Stodola
@jAndy, that test is simply abysmal. You're testing your solution 500 times, yet SLaks' is tested 10000 times! And you're not re-defining the `start` variable to `+new Date` after your solution runs...
J-P
I don't know why it is not selecting anything( `.length` shows 0). @SLaks, I think you have missed that closing parenthesis. This works. http://stackoverflow.com/questions/3281384/jquery-conditional-selector-for-table-rows/3281527#3281527
Ismail
@SLaks, you may want to add another closing parenthesis to that selector.
J-P
@J-P: you're right, my bad. 10000 hung Firefox I had to redfine it. Still, it's slowish. new link: http://www.jsfiddle.net/cfznm/2/
jAndy
@J-P: Even with this corrections, the first solution is more then 10 times faster.
Felix Kling
I think people are voting because it seems it should work as per the jQuery docs.
Ismail
@jAndy, you're still not re-defining `start` after the first loop runs...
J-P
@J-P: ok fixed all now, it's still ~300ms vs. ~2500ms in FireFox 3.6.6.
jAndy
@jAndy, your test is also missing the closing parenthesis from Slaks' selector. For some reason, his selector (even with the correct parenthesis) throws an error. `:has(td+td)` might be better...
J-P
@J-P: wow, indeed. It throws an error. `:has(td+td)` is way better, but still almost 50% slower.
jAndy
@jAndy, true. Btw, yours can be made faster with `$('table tbody tr')` instead of `$('table').find('tbody').find('tr')` (faster in chrome, by about 40ms).
J-P
@J-P: true, `$('table').find('tr')` will perform almost the same. Selecting mostly by css querystrings may only be faster on browser that support a native query selector engine.
jAndy
+2  A: 

You could test how many tds there are:

$.each($('.productList tbody tr'), function() {
    var tds = $(this).find('td');
    if(tds.length >= 2) {
        var orderCode = tds.eq(1).html().trim();
        // do stuff
    }
});
Felix Kling
+1  A: 

If you can change how you generate the table, using classes is a cleaner solution:

<td class="item-name"> item </td>
<td class="order-code"> order code </td>
<td class="item-price"> price </td>

Then select only the desired class:

var orderCode = $(this).find('td.order-code').html().trim();
if(orderCode)
{
  //do stuff
}

This will also give you increased flexibility in styling the table with CSS, and your code won't break if you add or reorder columns.

Kip
that's probably a good idea, I'll bear that in mind next time
fearofawhackplanet
A: 

Use the .attr() method. Check out api.jquery.com and that should help you be able to figure out how to get the colspan attribute from your cells.

Charmander
A: 

More filtration to what SLaks has written

$("table tbody tr td:nth-child(2):contains('code')")

Ismail
+4  A: 

Don't refine your selector, it won't scale well because jQuery will have to evaluate every child element. Avoid the error instead...

$('.productList tbody tr').each(function() { 
   var orderCode = $(this).find('td:eq(1)');

   if(orderCode.length > 0) { // Make sure it exists
     orderCode = orderCode.html().trim(); 
     // do stuff 
   }
}); 
Josh Stodola