web-dev-qa-db-ja.com

テーブルの行全体をリンクとしてクリック可能にする方法

私はBootstrapを使用していますが、以下はうまくいきません。

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>
htmlhtml-tablebootstrap-4
349
user1038814

著者のメモ私：

下記の他の答え、特にjqueryを使わないものを見てください。

著者のメモII：

後世のために保存されているが、確かに2019年に wrong アプローチ。（2017年にはさらに悪かった）

Bootstrapを使用しているので、jQueryを使用していることになります（^）。そのための1つの方法があります。

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

もちろん、hrefを使用したり場所を切り替えたりする必要はありません。クリックハンドラ関数で好きなことをすべて実行できます。 jQueryとハンドラーの書き方について読んでください。

class over id を使用する利点は、ソリューションを複数の行に適用できることです。

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

コードベースは変わりません。同じハンドラがすべての行を処理します。

別のオプション

Bootstrap jQueryコールバックは、次のように使用できます（document.readyコールバック内）。

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

これには、テーブルのソート時にリセットされないという利点があります（他のオプションで発生します）。

注意

これが投稿されたのでwindow.document.locationは時代遅れ（または少なくとも非推奨）です代わりにwindow.locationを使ってください。

511
Ahmed Masud

それはできません。無効なHTMLです。 <a>と<tbody>の間に<tr>を入れることはできません。代わりにこれを試してください：

<tr onclick="window.location='#';">
   ...
</tr>

それに取り組むとき、HTMLの外でクリックハンドラを割り当てるのにJavaScriptを使いたいと思うでしょう。

183
davidfurber

以下のように、すべての<td>内にアンカーを含めることができます。

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

その後、アンカーにdisplay:block;を使用して、行全体をクリック可能にすることができます。

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

例jsFiddleはここにあります。

これはおそらく、JavaScriptを使用しない限り、最適な方法です。

145
lifetimes

リンクテーブル行は可能ですが、標準の<table>要素を使用することはできません。 display: tableスタイルのプロパティを使ってそれを行うことができます。 ここ と ここ は実証するためのいくつかの謎です。

このコードはうまくいくはずです。

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}
<link href="https://stackpath.bootstrapcdn.com/Twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

標準の<table>要素が使用されていないため、適切なアクセシビリティを確保するためにARIAロールが必要であることに注意してください。該当する場合はrole="columnheader"のような追加の役割を追加する必要があるかもしれません。 こちらのガイドでもっと調べてください。

78
Trevin Avery

もっと柔軟な解決策は、data-href属性で何かをターゲットにすることです。これは、コードをさまざまな場所で簡単に再利用できるということです。

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

次に、あなたのjQueryでは、単にその属性を持つ任意の要素をターゲットにします。

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

そしてCSSのスタイルを忘れないでください。

[data-href] {
    cursor: pointer;
}

これで、data-href属性を任意の要素に追加することができ、それが機能します。私がこのような断片を書くとき、私はそれらが柔軟であるのが好きです。もしあれば、これにVanilla jsソリューションを追加してください。

9
AbdelElrafa

<a>内の<tr>タグを使って技術的にそれを行うにはいい方法があります。これは意味的には間違っているかもしれませんが（ブラウザに警告を出すかもしれませんが）、JavaScript/jQueryを必要とせずに動作します。

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

シモンズ：ここでのトリックは最後の要素として<a>タグを置くことであることに注意してください、さもなければそれは最初の<td>セルのスペースを取ることを試みるでしょう。

PPS：行全体がクリック可能になり、このリンクを使用して新しいタブで開くこともできます（Ctrl/CMD +クリック）。

6
Ronen

このブートストラップコンポーネントを使うことができます：

http://jasny.github.io/bootstrap/javascript/#rowlink

ジャスニーブートストラップ

お気に入りのフロントエンドフレームワークに欠けているコンポーネント。

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

使用法

データ属性による

クラス.rowlinkおよび属性data-link="row"を<table>または<tbody>要素に追加します。他のオプションでは、data-target="a.mainlink"のようにdata-に名前を追加します。.rowlink-skipクラスを<td>に追加することでセルを除外できます。

JavaScript経由

Javascriptを介して入力マスクを呼び出します。

$('tbody.rowlink').rowlink()
6
phlegx

Trでonclick javascriptメソッドを使用してクリック可能にすることもできます。また、詳細情報のためにリンクを作成する必要がある場合は、javascriptで関数を宣言し、onclickで呼び出して値を渡すこともできます。

5
Anahit Serobyan

これは、透明なA要素をテーブルの行の上に配置する方法です。利点は次のとおりです。

  • 実際のリンク要素です。ポインタを合わせると、ステータスバーにターゲットリンクが表示され、キーボードで移動したり、新しいタブまたはウィンドウで開いたり、URLをコピーしたりできます。
  • テーブルはリンクが追加されていない場合と同じように見えます。
  • テーブルコード自体に変更はありません

デメリット：

  • a要素のサイズは、作成時と、それがカバーする行のサイズを変更した後の両方で、スクリプトで設定する必要があります（そうでなければ、まったくJavaScriptを使用せずに実行できます。 HTMLまたはCSS）

テーブルはそのままです。

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

最初の各列にA要素を挿入し、必要なプロパティを設定して、jQuery JavaScriptを介してリンクを（各行に）追加します。

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

多くの余白と余白が使われるならば、幅と高さの設定は微妙になるかもしれません、しかし、一般的に数ピクセルオフは問題にならないはずです。

ここにライブデモ： http://jsfiddle.net/qo0dx0oo/ （Firefoxでは動作しますがIEやChromeは動作しません。リンクの位置が間違っているため）

ChromeとIE用に修正されました（まだFFでも動作します）： http://jsfiddle.net/qo0dx0oo/2/ /

4
David Balažic

私は誰かがすでにほとんど同じことを書いていることを知っています、しかし私のやり方は正しいやり方です（divはAの子になることはできません）そしてまたそれはクラスを使うほうが良いです。

CSSを使ってテーブルを模倣し、A要素を行にすることができます。

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

css：

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
3
Sidupac

ボタンの役割をテーブルの行に追加すると、BootstrapはCSSを変更せずにカーソルを変更します。私はその役割を、ごくわずかなコードで簡単に行をクリック可能にする方法として使用することにしました。

HTML

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

これと同じ原則を適用して、ボタンの役割を任意のタグに追加できます。

3
Todd Skelton

別のオプション<a>、CSSの位置、およびいくつかのjQueryまたはJSを使用する ：

HTML：

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS：

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

次に、jQueryを使って幅を指定する必要があります。

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });
3
Yisela

以下のコードはテーブル全体をクリック可能にします。この例でリンクをクリックすると、リンクをたどるのではなくアラートダイアログにリンクが表示されます。

HTML：

上記の例の背後にあるHTMLは次のとおりです。

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

そしてCSS：

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

そして最後に、魔法を起こさせるjQueryがあります。

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

行がクリックされると、アンカーに属するhrefが検索されます。見つかった場合、ウィンドウの位置はそのhrefに設定されます。

3
Aydan Aleydin

onclick=""属性を使用することをお勧めします。

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>
2
Ali Raza

受け入れられた答えは素晴らしいです、しかし、あなたがすべてのtrにURLを繰り返したくないならば、私は小さい代わりを提案します。したがって、urまたはhrefをtrではなくテーブルdata-urlに入れます。

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

Click data属性をすべてのtrに追加する必要もないので、これもまた優れています。もう1つ良いことは、クラスは実際にはスタイル設定にのみ使用されるため、クリックをトリガーするためにクラスを使用していないことです。

1
Thomas Williams

非常に簡単なオプション（Angularng-clickでも動作します）：

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

作業例 ここ

1
Wendell Pereira

あなたは、行にIDを与えることができます。

<tr id="special"> ... </tr>

そして、jqueryを使って次のようにします。

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

1
Peter Berg

次のように標準のBootstrap 4.3+を使用して達成されました-jQueryも追加のCSSクラスも必要ありません！

キーは、セル内のテキストでstretched-linkを使用し、<tr>を包含ブロックとして定義することです。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@Twitter</td>
    </tr>
  </tbody>
</table>

包含ブロックはさまざまな方法で定義できます。たとえば、transformをnoneの値に設定することはできません（上記の例のように）。

詳細については、こちらをご覧ください Bootstrap documentation for stretched-link。

0
Krishna Gupta

これは別の方法です...

HTML：

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

JQuery：

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});
0
klewis

私はこの問題をHTMLのみで解決しようと多くの時間を費やしました。 <a>を各<td>の下に入れ子にすることを意味します。まだ成功していません。

このアプローチの主な問題は、<a>の高さが列ごとに異なる可能性があることです。これは、このページの前半で@midstackが提案した fiddle で確認できます。そのため、クリック可能なサーフェスは、各列で必ずしも等しいとは限りません。これは、UXの重大な懸念事項です。

この問題を解決する2つの方法を見つけましたが、どれも理想的ではありません。

a）<td>を{ display: contents; }に設定します。これにより、他に2つの問題が発生します。

  1. 他の誰かが<td>タグに直接設定するなど、{ width: 20px; }に設定する場合、そのスタイルを何らかの方法で<a>タグに渡す必要があります。それを行うには何らかの魔法が必要です。おそらく、Javascriptの代替よりも魔法でしょう。

  2. { display: contents; }はまだ実験的です。特にEdgeではサポートされていません。

b）<td>を{ height: --some-fixed-value; }に設定します。これには柔軟性がありません。

0
gamliela
<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

ここでの主な解決策は素晴らしいのですが、私の解決策はクラスの必要性を取り除きます。 URLを含むdata-href属性を追加するだけです。

0
Christopher Vickers