使用CSS插入链接
时间：2020-03-06 15:03:21 来源:igfitidea点击:
我正在手工维护一个HTML文档，并且正在寻找一种自动在表格中的文本周围插入链接的方法。让我说明一下：
<table><tr><td class="case">123456</td></tr></table>
我想在我们的错误跟踪系统(顺便说一下，是FogBugz)中自动将类为" case"的TD中的每个文本链接到该案例。
因此，我希望将" 123456"更改为这种形式的链接：
<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>
那可能吗？我玩过：before和：after伪元素，但是似乎没有办法重复案例编号。
解决方案
不适用于跨浏览器的方式。但是，我们可以使用一些相对琐碎的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的方法来应用它，也可以直接在页面末尾添加它。
CSS无法实现，而且CSS绝不是什么。客户端Javascript或者服务器端(选择插入的语言)是必经之路。
我认为CSS不可能实现。 CSS仅应影响内容的外观和布局。
这似乎是PHP脚本(或者其他某种语言)的工作。我们没有提供足够的信息让我知道执行此操作的最佳方法，但是也许是这样的：
function case_link($id) {
return '<a href="http://bugs.example.com/fogbuz/default.php?' . $id . '">' . $id . '</a>';
}
然后在文档中：
<table><tr><td class="case"><?php echo case_link('123456'); ?></td></tr></table>
而且，如果我们需要.html文件，只需从命令行运行脚本，然后将输出重定向到.html文件即可。
这是针对我们发布的HTML的jQuery解决方案：
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});
本质上，在每个.case元素上，将获取该元素的内容，并将其放入包裹的链接中。
我们可能会有类似的内容(使用Javascript)。在<head>里面，有
<script type="text/javascript" language="javascript">
function getElementsByClass (className) {
var all = document.all ? document.all :
document.getElementsByTagName('*');
var elements = new Array();
for (var i = 0; i < all.length; i++)
if (all[i].className == className)
elements[elements.length] = all[i];
return elements;
}
function makeLinks(className, url) {
nodes = getElementsByClass(className);
for(var i = 0; i < nodes.length; i++) {
node = nodes[i];
text = node.innerHTML
node.innerHTML = '<a href="' + url + text + '">' + text + '</a>';
}
}
</script>
然后在<body>的末尾
<script type="text/javascript" language="javascript">
makeLinks("case", "http://bugs.example.com/fogbugz/default.php?");
</script>
我已经对其进行了测试，并且效果很好。
