Use jQuery to convert TD's with DIV's with numbers into clickable links?

Question

I have a webpage from the Fogbugz bug tracking system, and using a plugin to Fogbugz, I can insert javascript into each page.

In this Fogbugz installation I have created a custom field, with the case number of a different system, and this is shown in the case listings.

I'd like to make this column clickable, which would open a new tab and open the corresponding case in that other system.

The table cell in the webpage looks like this in html:

<td class="col_8"><div onmousedown="x(event)"><nobr><span>44468</span></nobr></div></td>

Basically I'd like to make that number, 44468, into a clickable link.

I've tried this jQuery code:

$(".col_8").html("....");

but this replaces the contents of the entire TD cell. That's OK by me if that's the best way to do it, but I don't know how to refer to the case number so that the link becomes the right one.

This, for instance, works in the sense that they all become links, but creates the same link for all the cases (ie. they all point to the same case number, obviously):

$(".col_8").html("44468");

I improved it (I'm learning jQuery):

$(".col_8>div").html("<a href='http://other.system/?44468'&gt;44468&lt;/a&gt;");

Additionally, the first row has a text that denotes the name of that system, this has different html, and only letters in the text, and I'd like for that part to stay as it is.

Can anyone tell me where to look or what to google for in order to find out what I need?

---

Courtesy of @Nick Craver's answer and comments, this is the final script that worked for me:

$(".col_8 span").filter(function() {
    return $.trim($(this).text());
}).each(function() {
    $(this).wrap("<a target='_blank' href='http://other.system?" + this.innerHTML + "' />");
});

Answer 1

You can pass a function to .wrap(), like this:

$(".col_8 span").wrap(function() {
  return "<a href='http://other.system/?" + this.innerHTML + "' />";
});

You can test it out here, the result is turning:

<span>44468</span>

Into:

<a href="http://other.system/?44468"&gt;&lt;span&gt;44468&lt;/span&gt;&lt;/a&gt;

The rest remains unchanged. If the markup isn't exactly as you posted and there are spaces, etc, you'll want $(this).text() instead of this.innerHTML, possibly with a $.trim() wrapper as well.

---

Since the OP is on jQuery 1.3.2 (the above is for jQuery 1.4+ only), here's that version:

$(".col_8 span").each(function() {
  $(this).wrap("<a href='http://other.system/?" + this.innerHTML + "' />");
});

You can test it here.

Answer 2

You can replace spans with anchors like this:

$('.col_8').each(function() {
    var $span = $(this).find('span');
    var id = $span.html();

    $a = $('<a />').attr('href', 'http://other.system/?'+id).html(id);

    $span.replaceWith($a);
});

Answer 3

I haven't tested this, but hopefully it should get close to what you're after:

var spans = $('td.col_8 span'); // Find the spans within the table cells
if (spans && spans.length) { // If we have span tags to work with
  spans.each(function() {
    var span = $(this),
        code = span.text(), // Get the span tag's text node
        anchor;
    if (/^\d+$/.test(code) === true) { // If the text's characters are only digits
      anchor = $('<a href="http://other.system/?' + code + '">' + code + '</a>'); // Create an anchor tag
      span.replaceWith(anchor); // And replace the span with the anchor tag
    }
  });
}