使用CSS插入链接
我手动维护HTML文档,并且正在寻找一种方法来自动在表格中的文本周围插入链接。让我来举例说明:使用CSS插入链接
<table><tr><td class="case">123456</td></tr></table>
我想自动在一个TD每个文本带班“情况”的链接,在我们的bug跟踪系统(顺便说一下,是FogBugz的),这种情况下。
所以我想的是“123456”要改变这种形式的链接:
<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
,或者干脆包括它的权利在页面的末端。
小心谨慎地将这些TD内容封装在链接中;块级元素可能会出现,并且它们在A标签内无效。此外,我会找到合适的表格并获取其子元素,而不是仅仅获取文档中的所有TD。 – 2008-10-03 04:27:49
不可能使用CSS,再加上这不是CSS的任何方式。客户端Javascript或服务器端(插入语言的选择)是要走的路。
我不认为这是可能的CSS。 CSS只会影响内容的外观和布局。
这似乎是一个PHP脚本(或其他语言)的工作。如果你想要一个
<table><tr><td class="case"><?php echo case_link('123456'); ?></td></tr></table>
和:你没有提供足够的信息让我知道做到这一点的最好办法,但也许是这样的:
function case_link($id) {
return '<a href="http://bugs.example.com/fogbuz/default.php?' . $id . '">' . $id . '</a>';
}
再后来在文档中。 html文件,只需从命令行运行脚本并将输出重定向到.html文件即可。
这里是专门针对你的HTML一个jQuery解决方案发布:
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="example.com/script.php?id='+link+'"></a>');
});
本质
,在每个元素。病例,会抢了元素的内容,并把它们扔到缠着链接。
你可能有这样的事情(使用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>
我测试过它的结束,并能正常工作。
我知道这是一个老问题,但我偶然发现了这个帖子寻找创建使用CSS超链接的解决方案,并最终使我自己,可能是跨越了这个问题的人磕磕绊绊,像我一样的兴趣:
这里是调用的PHP函数 '连接器();',使假的CSS属性
连接: '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
你是什么意思自动?您需要在HTML上运行一些应用程序,将其转换为所需的结果。 – azamsharp 2008-10-02 23:48:54