20

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

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

クラス「ケース」を持つ TD 内のすべてのテキストを、バグ追跡システム (ちなみに、FogBugz) 内のそのケースへのリンクに自動的に作成したいと考えています。

そのため、「123456」を次の形式のリンクに変更したいと思います。

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

それは可能ですか？:before および :after 擬似要素で遊んだことがありますが、ケース番号を繰り返す方法はないようです。

4

6 に答える 6

13

ブラウザ間で機能する方法ではありません。ただし、比較的単純な 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、単にページの最後に含めることができます。

于 2008-10-02T23:47:27.517 に答える
11

投稿された HTML に固有のjQueryソリューションを次に示します。

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

本質的に、各 .case 要素に対して、要素のコンテンツを取得し、それらをラップされたリンクにスローします。

于 2008-10-03T00:03:26.183 に答える
4

CSS では不可能です。さらに、それは CSS の目的ではありません。クライアント側の Javascript またはサーバー側 (選択した言語を挿入) が最適です。

于 2008-10-02T23:50:47.010 に答える
1

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

于 2008-10-02T23:52:09.050 に答える
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>

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

于 2008-10-03T00:06:56.113 に答える