我手动维护一个HTML文档，我正在寻找一种自动将表格中文本周围插入链接的方法。让我举个例子：
<table><tr><td class="case">123456</td></tr></table>
我想要自动将具有"case"类的每个TD中的文本转换为我们的错误跟踪系统中该案例的链接（顺便说一句，我们使用的是FogBugz）。
因此，我希望将"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 这样的方式来应用它，或者直接将其包含在页面末尾。这里提供一个针对你发布的HTML的jQuery解决方案:
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});
基本上，对于每个 .case 元素，将获取该元素的内容，并将其放入包装在链接中的元素中。
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 文件即可。
<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>
我已经测试过了，它运行良好。
我知道这是一个老问题，但我偶然发现了这篇帖子，寻找使用CSS创建超链接的解决方案，最终自己制作了一个，可能对像我一样偶然发现这个问题的人有所帮助：
这里有一个名为“linker（）;”的php函数，它启用了一个虚假的CSS属性
connect: 'url.com';
用于定义#id项目。只需让php在您认为值得链接的每个HTML项目上调用此功能即可。输入是.css文件作为字符串，使用：
$style_cont = file_get_contents($style_path);
以及相应项目的#id。这就是整个过程：
function linker($style_cont, $id_html){
if (strpos($style_cont,'connect:') !== false) {
$url;
$id_final;
$id_outer = '#'.$id_html;
$id_loc = strpos($style_cont,$id_outer);
$connect_loc = strpos($style_cont,'connect:', $id_loc);
$next_single_quote = stripos($style_cont,"'", $connect_loc);
$next_double_quote = stripos($style_cont,'"', $connect_loc);
if($connect_loc < $next_single_quote)
{
$link_start = $next_single_quote +1;
$last_single_quote = stripos($style_cont, "'", $link_start);
$link_end = $last_single_quote;
$link_size = $link_end - $link_start;
$url = substr($style_cont, $link_start, $link_size);
}
else
{
$link_start = $next_double_quote +1;
$last_double_quote = stripos($style_cont, '"', $link_start);
$link_end = $last_double_quote;
$link_size = $link_end - $link_start;
$url = substr($style_cont, $link_start, $link_size); //link!
}
$connect_loc_rev = (strlen($style_cont) - $connect_loc) * -1;
$id_start = strrpos($style_cont, '#', $connect_loc_rev);
$id_end = strpos($style_cont,'{', $id_start);
$id_size = $id_end - $id_start;
$id_raw = substr($style_cont, $id_start, $id_size);
$id_clean = rtrim($id_raw); //id!
if (strpos($url,'http://') !== false)
{
$url_clean = $url;
}
else
{
$url_clean = 'http://'.$url;
};
if($id_clean[0] == '#')
{
$id_final = $id_clean;
if($id_outer == $id_final)
{
echo '<a href="';
echo $url_clean;
echo '" target="_blank">';
};
};
};
};
使用像.wrap()或getelementbyID()这样的命令可能可以改进/缩短此代码，因为它只生成<a href='blah'>部分，但是由于没有开放子句，</a>会自动消失，所以只要在任何地方添加它们就可以正常工作 :D