使用CSS插入链接 [英] Insert a Link Using CSS

问题描述

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

 < table>< tr>< td class =case> 123456< / td> ;< / TR>< /表> 
  

我想自动将TD中的每个文本与类case链接到该案例在我们的错误跟踪系统中（顺便说一句，它是FogBugz）。

所以我想把这个123456改成这种形式的链接：

p>

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

这可能吗？我已经玩过：之前和之后：伪元素，但似乎没有办法重复案例号。

解决方案

不以跨浏览器的方式工作。然而，你可以用一些相对简单的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 将其包含在页面的最后。

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.

解决方案

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.

这篇关于使用CSS插入链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！