web-dev-qa-db-ja.com

CSSを使用してリンクを挿入する

私はHTMLドキュメントを手作業で管理しており、テーブル内のテキストの周囲にリンクを自動的に挿入する方法を探しています。説明しましょう：

<table><tr><td class="case">123456</td></tr></table>

TD with class "case"のすべてのテキストを、バグ追跡システム（偶然にもFogBugzです）のそのケースへのリンクに自動的に設定します。

したがって、「123456」をこのフォームのリンクに変更してください。

<a href="http://bugs.example.com/fogbugz/default.php?123456">123456</a>

それは可能ですか？私は：beforeと：afterの疑似要素を試してみましたが、ケース番号を繰り返す方法がないようです。

htmlhyperlinkfogbugz
15
Schof

ブラウザ間で機能する方法ではありません。ただし、比較的簡単な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などを使用して適用するか、ページの最後に挿入することができます。

13
Dan

これが、投稿されたHTMLに固有の jQuery ソリューションです。

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

本質的に、各.case要素の上で、要素のコンテンツを取得し、それらをラップしたリンクにそれらを投げます。

10
Owen

CSSでは不可能です。さらに、CSSはそれとはまったく異なります。クライアント側のJavascriptまたはサーバー側（選択した言語を挿入）が最適です。

4
da5id

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ファイルにリダイレクトします。

1
Jeremy Ruten

あなたはこのようなものを持つことができます（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>

私はそれをテストしました、そしてそれはうまく働きます。

0
Vincent McNabb