Question

I have the following rendered html:

<table width="420" cellspacing="0" cellpadding="3" border="0">
<tbody>
<tr><td>....</td>
</tr>
<tr>
<td>Total Amount Due:</td>
<td>$168.88</td>
</tr>

My final goal is to obtain and change the value shown after Total Amount Due. I have started by trying to select the element containing the text “Total Amount Due:”.

Here is my code attempting this:

var tdElement = $("td:contains('Total Amount Due:')");
alert($(tdElement).text());

I have tried changing the syntax a bit in the command line of Firebug, but when I do I always end up receiving an error in the first line. With the code like this, I do not receive an error until the second line where I get a TypeError: $(tdElement) is null.

Also, not sure if this affects anything but this table is actually within two other tables.

Answer 1

I get a TypeError: $(tdElement) is null.

Even if it doesn’t match anything, jQuery returns a valid jQuery object (containing no matching elements), not null, so that sounds like either:

• You don’t have jQuery loaded. Check the JavaScript console to see whether you have load errors and resolve any you find.

• Or you do have it loaded, but you also have another library like Prototype or MooTools loaded that has stolen the $ symbol. If so, you have three choices (at least):

  1. Try to stop using the other library, and remove it from the page.

  2. Use jQuery instead of $ everywhere you want to use jQuery.

  3. Or put your jQuery code in a function you can use to shadow the $ symbol, like this:

     // If you have another library loaded, out here $ may not === jQuery
     (function($) {
         // Here, your code can happily assume $ === jQuery...
     })(jQuery);
     

Once you sort that out:

I’d strongly recommend not using :contains if the page is of any size. Instead, if that element is unique on the page, use an id and find it using $("#theid"). If not, use a class, and find it using $(".theclass").find(":contains('Total Amount')").

And finally: You’re using

var tdElement = $("td:contains('Total Amount Due:')");

but then also

alert($(tdElement).text());

There’s no need to call $ a second time, just use the first jQuery instance:

alert(tdElement.text());