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.