Trouble figuring out correct selector

Question

This is a little complicated so I will try and explain as best as I can. In the following code the goal is to find a td with the text "(Backordered)" and replace it with a link with the following URL

/Email_Me_When_Back_In_Stock.asp?ProductCode=H210-10 

The "H210-10" needs to be extracted from the 1st sibling td, in this case

<td class="smalltext colors_text">H210-10</td>

Note: there can be more than one tr > td with "(Backorder)" in it and I need to do this for each and every one that has "(Backorder)" in it. I am struggling on how to tackle this issue. I have no access to the markup.

<table cellspacing="1" cellpadding="3" border="0" bgcolor="#cccccc">
<tr class="colors_backgroundlight">
<td>Item#</td>
<td>Item Name</td>
<td>Our Price</td>
<td>Qty</td>
<td><b>Add</b></td>
</tr>
<tr bgcolor="#ffffff" class="Multi-Child_Background">
<td class="smalltext colors_text">H211-41</td>
<td class="productnamecolorSMALL colors_productname">J. Herbin Small Glass Dip Pen - Amber Frosted</td>
<td class="smalltext colors_text"><b>$15.75</b></td>
<td><input type="textbox" value="1" name="QTY.H211-41" maxlength="8" size="5"></td>
<td><input type="checkbox" value="H211-41" name="ProductCode"></td> 
</tr>
<tr bgcolor="#ffffff" class="Multi-Child_Background">
<td class="smalltext colors_text">H211-09</td>
<td class="productnamecolorSMALL colors_productname">J. Herbin Small Glass Dip Pen - Black Frosted</td>
<td class="smalltext colors_text"><b>$15.75</b></td>
<td><input type="textbox" value="1" name="QTY.H211-09" maxlength="8" size="5"></td>
<td><input type="checkbox" value="H211-09" name="ProductCode"></td> 
</tr>
<tr bgcolor="#ffffff" class="Multi-Child_Background">
<td class="smalltext colors_text">H210-10</td>
<td class="productnamecolorSMALL colors_productname">J. Herbin Small Glass Dip Pen - Blue Striped</td>
<td class="smalltext colors_text"><b>$15.75</b></td>
<td colspan="2"><b><font color="#cc0000"><span class="331">(Backordered)</span>
</font></b></td>
</tr>
<tr bgcolor="#ffffff" class="Multi-Child_Background">
<td class="smalltext colors_text">H210-30</td>
<td class="productnamecolorSMALL colors_productname">J. Herbin Small Glass Dip Pen - Green Striped</td>
<td class="smalltext colors_text"><b>$15.75</b></td>
<td><input type="textbox" value="1" name="QTY.H210-30" maxlength="8" size="5"></td>
<td><input type="checkbox" value="H210-30" name="ProductCode"></td> 
</tr>
<tr bgcolor="#ffffff" class="Multi-Child_Background">
<td class="smalltext colors_text">H210-20</td>
<td class="productnamecolorSMALL colors_productname">J. Herbin Small Glass Dip Pen - Red Striped</td>
<td class="smalltext colors_text"><b>$15.75</b></td>
<td><input type="textbox" value="1" name="QTY.H210-20" maxlength="8" size="5"></td>
<td><input type="checkbox" value="H210-20" name="ProductCode"></td> 
</tr>
<tr bgcolor="#ffffff" class="Multi-Child_Background">
<td class="smalltext colors_text">H211-77</td>
<td class="productnamecolorSMALL colors_productname">J. Herbin Small Glass Dip Pen - Violet Frosted</td>
<td class="smalltext colors_text"><b>$15.75</b></td>
<td><input type="textbox" value="1" name="QTY.H211-77" maxlength="8" size="5"></td>
<td><input type="checkbox" value="H211-77" name="ProductCode"></td> 
</tr>
<tr><td bgcolor="#ffffff" align="right" class="smalltext colors_text Multi-Child_Background" colspan="5">Check the items you wish to purchase, then click
<input type="hidden" value="Y" name="IsMultiChildAddToCart">
<input type="hidden" value="ShoppingCart.asp" name="ReturnTo">
<input border="0" type="image" alt="J. Herbin Small Glass Dip Pen" name="btnaddtocart" src="/v/vspfiles/templates/140/images/buttons/btn_addtocart.gif">
</td></tr></table>

Answer 1

See if this works:

$('td:contains("(Backordered)")').each(function(){
    $this = $(this).html('');

    $('<a />').appendTo(this).attr('href', '/Email_Me_When_Back_In_Stock.asp?ProductCode=' + $this.siblings(':first-child').text()).text('Backorder');
});

Answer 2

This works for me:​

$("td:contains('(Backordered)')").each(function() {
    var item = $(this).closest('tr').find('td:first')
    var code = $(item).text();
    $(item).html('<a href="/Email_Me_When_Back_In_Stock.asp?ProductCode='+code+'">'+code+'</a>');
});​​​​​​​​​​​​​​​​

and the js fiddle

Answer 3

It turns out I did have some limited access to the markup whereas before i thought I did not have any access.

I was able to add a class to the "(backorder)" text as such...

<span class="331">(Backordered)</span>

and by doing that I came of with the following Jquery that worked.

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('.331').each(function(){
$(this).closest('td').replaceWith( '<td colspan="2"><a href="/Email_Me_When_Back_In_Stock.asp?ProductCode=' + $(this).closest('td').siblings(':first-child').text() + '"><img border="0" src="/v/vspfiles/templates/140/images/buttons/btn_emailbackinstock.gif"</a></tr>');
}); 
});
</script>

Thanks all for your help which helped me into figuring this out.