web-dev-qa-db-ja.com

html-リンクのような表の行

テーブル行を何かへのリンクとして設定できません。 cssとhtmlのみを使用できます。行のdivから別のdivまでさまざまなことを試しましたが、それでも機能させることはできません。

htmlcsshyperlinkhtml-table
96
Max Frai

これを行うには2つの方法があります。

  • JavaScriptを使用：

    <tr onclick="document.location = 'links.html';">

  • アンカーの使用：

    <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

次を使用して2番目の作品を作成しました。

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

列間のデッドスペースを取り除くには：

table tr td {
    padding-left: 0;
    padding-right: 0;
}

次に、2番目の例の簡単なデモを示します。 DEMO

168
Esteban Küber

自分でカスタムjquery関数を作成しました。

HTML

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

簡単で完璧です。うまくいけばそれがあなたを助けます。

（私はOPがCSSとHTMLのみを望んでいることを知っていますが、jQueryを検討してください）

編集

データ属性を使用して、Matt Kantorと合意しました。上記の編集済みの回答

52
Ron van der Heijden

それをサポートするブラウザを使用している場合は、CSSを使用して<a>をテーブル行に変換できます。

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

もちろん、<a>内にブロック要素を配置しないことに制限されています。また、これを通常の<table>と混在させることはできません

26
Greg

have toテーブルを使用する場合、各テーブルセルにリンクを配置できます。

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

そして、リンクがセル全体を埋めるようにします。

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

テーブルの代わりに<div>sを使用できる場合、HTMLの方がはるかに簡単になり、テーブルセル間のリンクに「ギャップ」が生じません。

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

<div>メソッドに対応するCSSは次のとおりです。

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}
13
system PAUSE

通常の方法は、onClick要素のTR属性にJavaScriptを割り当てることです。

JavaScriptを使用できない場合は、トリックを使用する必要があります。

  1. 同じ行の各TDに同じリンクを追加します（リンクはセルの最も外側の要素でなければなりません）。

  2. リンクをブロック要素に変換：a { display: block; width: 100%; height: 100%; }

後者はリンクをセル全体に強制的に埋めるため、どこをクリックしてもリンクが呼び出されます。

12
Aaron Digulla

Sirwilliamからの回答は私に最も合っています。ホットキーCtrl + LeftClick（新しいタブでページを開く）のサポートでJavascriptを改善しました。イベントctrlKeyはPCで使用され、metaKeyはMacで使用されます。

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

例

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

7
Vlastislav Novák

<td>要素を<a>タグでラップすることはできませんが、onclickイベントを使用して関数を呼び出すことで同様の機能を実現できます。例があります here 、この関数のようなもの：

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

そして、次のようにテーブルに追加します。

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
7
Donut

この質問には既に回答済みですが、このページの解決策がまだ好きではありません。 JQueryを使用する人々のために、テーブル行に<a>タグとほぼ同じ動作を与えることができる最終ソリューションを作成しました。

これは私の解決策です：

jQueryこれを、たとえば標準のインクルードされたjavascriptファイルに追加できます

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTMLこれで、HTML内の<tr>要素でこれを使用できます

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>
4
botenvouwer

リンクで<tr>をシミュレートしたいが、HTML標準を尊重したい場合は、これを行います。

HTML：

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS：

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

このようにして、誰かがマウスをTRに乗せると、すべての行（およびこのリンク）がホバースタイルになり、複数のリンクがあることを確認できなくなります。

希望は誰かを助けることができます。

フィドル ここ

2
sara_thepot

これにより、tr内のリンクを複製する必要がなくなります-最初のaからリンクを外すだけです。

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
1
Will

別の方法があります。特に、jQueryを使用してデータを投稿する必要がある場合

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

変数の設定は、セッション内の変数を設定します。変数は、これからページを読み取って操作できます。

ウィンドウの場所に直接投稿する方法が本当に欲しいのですが、可能だとは思いません。

0
Thomas Williams

これをありがとう。次のように行にCSSクラスを割り当てることにより、ホバーアイコンを変更できます。

<tr class="pointer" onclick="document.location = 'links.html';">

cSSは次のようになります。

<style>
    .pointer { cursor: pointer; }
</style>
0
tkrn

このスレッドと他のスレッドを読んだ後、javascriptで次のソリューションを思い付きました。

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

これを使用するには、クリックできるようにしたいhref/tr/td/thに<tr href="http://stackoverflow.com">のように入力します。また、上記のスクリプトは、tr要素が作成された後に（その配置またはイベントハンドラーを使用して）実行されることを確認してください。

欠点は、TRがdisplay: table;を含むdivのようにリンクとして完全に動作せず、キーボードで選択できないか、ステータステキストがないことです。 編集：onkeydown、role、tabIndexを設定してキーボードナビゲーションを機能させました。マウスのみが必要な場合は、その部分を削除できます。ただし、ホバリングしてもステータスバーにURLは表示されません。

「tr [href]」CSSセレクターを使用して、リンクTRを具体的にスタイル設定できます。

0
netman
//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

おそらくこれらの線に沿って何か？ JSを使用しますが、それが行（tr）をクリック可能にする唯一の方法です。

セル全体を埋めるアンカータグを持つ単一のセルがない場合。

そして、とにかくテーブルを使用するべきではありません。

0
CaffGeek