Insert a Link Using CSS

Question

I'm hand-maintaining an HTML document, and I'm looking for a way to automatically insert a link around text in a table. Let me illustrate:

<table><tr><td class="case">123456</td></tr></table>

I would like to automatically make every text in a TD with class "case" a link to that case in our bug tracking system (which, incidentally, is FogBugz).

So I'd like that "123456" to be changed to a link of this form:

<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>

Is that possible? I've played with the :before and :after pseudo-elements, but there doesn't seem to be a way to repeat the case number.

Answer 1

Not in a manner that will work across browsers. You could, however, do that with some relatively trivial Javascript..

function makeCasesClickable(){
    var cells = document.getElementsByTagName('td')
    for (var i = 0, cell; cell = cells[i]; i++){
        if (cell.className != 'case') continue
        var caseId = cell.innerHTML
        cell.innerHTML = ''
        var link = document.createElement('a')
        link.href = 'http://bugs.example.com/fogbugz/default.php?' + caseId
        link.appendChild(document.createTextNode(caseId))
        cell.appendChild(link)
    }
}

You can apply it with something like onload = makeCasesClickable, or simply include it right at the end of the page.

Answer 2

here is a jQuery solution specific to your HTML posted:

$('.case').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});

in essence, over each .case element, will grab the contents of the element, and throw them into a link wrapped around it.