jQuery 1.7.1: length function not working to get table tr count

Question

This code stopped working when we upgraded to jQuery 1.7.1. $('table.className > tr').length is returning 0. Can you tell me how to correct it?

.NET code (executes jQuery code):

public static long GetTableRowCountByCssClass(IWebDriver driver, string cssClass, int exclusionRowCount)
{
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    long count = (long)js.ExecuteScript("return $('table." + cssClass + " > tr').length");
    if (count != 0)
    {
        count = count - exclusionRowCount;
    }
    return count;
}

HTML code:

<!-- Products -->
<table class="cart" cellpadding="0" cellspacing="0" border="0">

    <thead>
        <tr>
            <th class="remove">Delete</th>
            <th class="prod-desc">Product Description</th>
            <th class="ships_w">Ships Within</th>
            <th class="price">Unit Price</th>
            <th>&nbsp;</th>
            <th class="quantity">Qty.</th>
            <th class="totals">Total</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <td id="subtotal" class="order_summary_label" colspan="6" >Sub Total: </td>
            <td id="subtotal_number" class="order_summary_value">$124.89</td>
        </tr>
        <tr>
            <td id="cart-total-label" class="order_summary_label" colspan="6" >Total: </td>
            <td id="cart-total" class="order_summary_value"><strong>$124.89</strong></td>
        </tr>
    </tfoot>

    <tbody>

        <tr class="alt">

            <td class="remove">
                <input class="checkIt" type="checkbox" name="remove[variation][208]" id="remove_208_variation" value="0"  />
            </td>

            <td class="prod-desc">
            <div class="imgThmb">
            <a href="/product/water-gel" title="Water Gel - Magic Slush Powder - Water Gel 100 gram Jar">
            <img src="/img/cache/product/WSPA_500_140_64.jpg" alt="Water Gel - Magic Slush Powder - Water Gel 100 gram Jar" />
            </a>
            </div>

                <a href="/staging/product/water-gel" title="Water Gel - Magic Slush Powder - Water Gel 100 gram Jar" class="clean">
                    Water Gel - Magic Slush Powder - Water Gel 100 gram Jar                                                     
                </a>
            </td>

            <td class="ships_w">
            </td>

            <td class="price">$6.99</td>

            <td class="discount">
            </td>

            <td class="quantity">
                <input type="text" class="quantity_box quantity" name="quantities[variation][208]" id="quantity_variation_208" value="5" maxlength="4" />
            </td>

            <td class="totals"><strong>$34.95</strong></td>

        </tr>

        <tr >

            <td class="remove">
                <input class="checkIt" type="checkbox" name="remove[variation][1118]" id="remove_1118_variation" value="0"  />
            </td>

            <td class="prod-desc">
            <div class="imgThmb">
            <a href="/product/flying-film-canisters" title="Flying Film Canisters Kit - Flying Film Canisters Activity Kit">
            <img src="/img/cache/product/film_canister_launcher_2011011240_64.jpg" alt="Flying Film Canisters Kit - Flying Film Canisters Activity Kit" />
            </a>
            </div>

            <a href="/product/flying-film-canisters" title="Flying Film Canisters Kit - Flying Film Canisters Activity Kit" class="clean">
            Flying Film Canisters Kit - Flying Film Canisters Activity Kit                                                      
            </a>
            </td>

            <td class="ships_w">
            </td>

            <td class="price">$14.99</td>

            <td class="discount">
            </td>

            <td class="quantity">
                <input type="text" class="quantity_box quantity" name="quantities[variation][1118]" id="quantity_variation_1118" value="6" maxlength="4" />
            </td>

            <td class="totals"><strong>$89.94</strong></td>

        </tr>

    </tbody>

</table>

You mean it worked in previous versions? – BoltClock Mar 23 '12 at 20:55 — BoltClock, Mar 23 '12 at 20:55
yep, absolutely! We upgraded from 1.5.1. – JustBeingHelpful Mar 23 '12 at 21:02 — JustBeingHelpful, Mar 23 '12 at 21:02

score 8 · Accepted Answer · answered Mar 23 '12 at 20:53

8

The problem is that the tr is not, and cannot be, a direct child of the table element. It's a child of the tbody element that's automatically placed in the table by the browser if it's not put there by the author of the page.

If you try, instead: $('table.className > tbody > tr').length it should work.

answered Mar 23 '12 at 20:53

David Thomas

249,100
51
377
410

@David Thomas, assuming you are correct, I just learned something about the browser's auto-placement of `tbody`, so thanks! – Marc Mar 23 '12 at 20:57
I can't speak as to IE (hobbyist, \*nix-runner...) but every browser with which I've deliberately *looked* for this behaviour (Chromium, Firefox, Opera, on Ubuntu) has demonstrated this behaviour. – David Thomas Mar 23 '12 at 20:58
1

@Marc: See [this question](http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-with-child-selectors-work), [this question](http://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5) (HTML5), [the HTML 4 spec](http://www.w3.org/TR/html4/struct/tables.html) and [the HTML5 spec](http://www.w3.org/TR/html5/tabular-data.html). – BoltClock Mar 23 '12 at 21:12
this is very interesting. I couldn't figure out from version 1.5.1 why I had to exclude 3, sometimes 4, from my count. I'm guessing it was because I didn't have the tbody in there. Now I get a count of -2 when my actual row count is 2 from the code I put in my answer. Explain that one and I'll +1 you. Now I can at least get rid of that hack. – JustBeingHelpful Mar 23 '12 at 21:20
I think you need to [JS Fiddle](http://jsfiddle.net/) your code to reproduce your problem. I don't *think* that length *can* return a negative number (there can't be *less* than 0 elements on a page, after all...). – David Thomas Mar 23 '12 at 21:24
@David, No, it wasn't returning a negative length. It was returning a number too large. For example: if there were 2 rows, it would return 5, sometimes 6 .. depending on the table, so I had to subtract 3 or 4. That's what the exclusionCount was for in my .NET code above. The .NET WebDriver method/function itself cannot return a negative number because I was checking if the jQuery count was 0 first. Before the .NET function was returning negative values, but only when the jQuery count was 0 (before putting in the exclusionCount hack) – JustBeingHelpful Mar 23 '12 at 21:29
Was it counting the rows in the `thead` or `tfoot` perhaps? Without seeing your actual code/rendered html it's almost impossible to say. But if you post a JS Fiddle I'll *try*. – David Thomas Mar 23 '12 at 21:58

jQuery 1.7.1: length function not working to get table tr count

1 Answers1