Question

我正在手工维护一个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伪元素，但似乎没有办法重复案例编号。

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的内容来应用它，或者只是将其包含在页面的末尾。

Answer 2

这是针对您发布的HTML的jQuery解决方案：

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

实质上，在每个.case元素上，将获取元素的内容，并将它们放入包裹它的链接中。

Answer 3

CSS不可能，加上那不是CSS的任何方式。客户端Javascript或服务器端（选择插入语言）是可行的方法。

Answer 4

我认为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文件。

Answer 5

你可以拥有这样的东西（使用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>

我已经测试过了，它运行正常。

Answer 6

我知道这是一个老问题，但我偶然发现这篇文章正在寻找一个使用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

使用CSS插入链接

6 个答案: