2008-10-02 65 views
7

我手動維護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> 

這可能嗎?我已經玩過:之前和之後:僞元素,但似乎沒有辦法重複案例編號。

+0

你是什麼意思自動?您需要在HTML上運行一些應用程序,將其轉換爲所需的結果。 – azamsharp 2008-10-02 23:48:54

回答

11

不適用於跨瀏覽器的方式。你可以,但是,做一些比較瑣碎的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,或者乾脆包括它的權利在頁面的末端。

+0

小心謹慎地將這些TD內容封裝在鏈接中;塊級元素可能會出現,並且它們在A標籤內無效。此外,我會找到合適的表格並獲取其子元素,而不是僅僅獲取文檔中的所有TD。 – 2008-10-03 04:27:49

5

不可能使用CSS,再加上這不是CSS的任何方式。客戶端Javascript或服務器端(插入語言的選擇)是要走的路。

1

我不認爲這是可能的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文件即可。

7

這裏是專門針對你的HTML一個jQuery解決方案發布:

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

,在每個元素。病例,會搶了元素的內容,並把它們扔到纏着鏈接。

0

你可能有這樣的事情(使用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> 

我測試過它的結束,並能正常工作。

-3

我知道這是一個老問題,但我偶然發現了這個帖子尋找創建使用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