使用 CSS 插入链接

Question

我正在手动维护一个 HTML 文档，并且正在寻找一种方法来自动在表格中的文本周围插入链接。让我举例说明：

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

我想在我们的 bug 跟踪系统（顺便说一句，是 FogBugz）中自动使 TD 中带有类“case”的每个文本都成为该案例的链接。

所以我希望将“123456”更改为这种形式的链接：

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

那可能吗？我玩过 :before 和 :after 伪元素，但似乎没有办法重复案例编号。

原文由 Schof 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不是以一种可以跨浏览器工作的方式。但是，您可以使用一些相对简单的 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)
    }
}

您可以将它与类似 onload = makeCasesClickable 之类的东西一起应用，或者直接将它包含在页面末尾。

原文由 Dan 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

这是一个特定于您发布的 HTML 的 jQuery 解决方案：

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

本质上，在每个 .case 元素上，将获取元素的内容，并将它们扔到环绕它的链接中。

原文由 Owen 发布，翻译遵循 CC BY-SA 2.5 许可协议