ブートストラップを使用していますが、以下は機能しません。

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

著者のメモI：

以下の他の回答、特にjqueryを使用しない回答をご覧ください。

著者の注記II：

後世のために保存されていますが、2020年には確かに間違ったアプローチです。

元の回答

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ハンドラーの作成方法と読み方。

使用しての利点クラス以上の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。

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

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

ポインタービューのスタイルを追加する

[data-href] { cursor: pointer; }

それを理解するときは、JavaScriptを使用してHTMLの外部でクリックハンドラーを割り当てる必要があります。

次の<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を使用しない限り、取得するのと同じくらい最適です。

リンクされたテーブル行は可能ですが、標準<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"該当する場合など、追加の役割を追加する必要がある場合があります。こちらのガイドで詳細をご覧ください。

次のように標準の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のドキュメントをご覧くださいstretched-link。

より柔軟なソリューションは、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属性を任意の要素に追加でき、機能します。私がこのようなスニペットを書くとき、私はそれらが柔軟であることを望みます。バニラjsソリューションがある場合は、追加してください。

このブートストラップコンポーネントを使用できます。

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

Jasnyブートストラップ

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

<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".rowlink-skip<td>

JavaScript経由

JavaScriptを介して定型入力を呼び出します。

$('tbody.rowlink').rowlink()

<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';
}

PS：ここでの秘訣は、<a>タグを最後の要素として配置すること<td>です。そうしないと、最初のセルのスペースを取ろうとします。

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

trでonclick javascriptメソッドを使用してクリック可能にすることができます。また、詳細のためにリンクを構築する必要がある場合は、javascriptで関数を宣言してonclickで呼び出し、いくつかの値を渡すことができます。

以下は、テーブルの行の上に透明な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/

ボタンの役割をテーブルの行に追加すると、Bosstrapは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");
     });
});

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

次のコードは、テーブル全体をクリックできるようにします。この例のリンクをクリックすると、リンクをたどるのではなく、警告ダイアログにリンクが表示されます。

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に設定されます。

非常に簡単なオプションは、私の見解では、クリックで使用するだけですが、より正確です。これにより、ビューとコントローラーが分離されます。URLをハードコーディングしたり、クリックで実行する必要があるその他のことを行う必要はありません。 。Angular ng-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>

ここで働く例

を使用する別のオプション<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');
    });

私は誰かがすでにほとんど同じように書いたことを知っていますが、私のやり方は正しい方法であり（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;}

onclick=""初心者にとって使いやすく理解しやすいので、属性を使用したいと思います

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

これは簡単な解決策です。

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

受け入れられた答えは素晴らしいですが、すべてのtrでURL​​を繰り返したくない場合は、小さな代替案を提案します。したがって、テーブルのdata-urlにURLまたはhrefを置き、trは入れません。

<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);
    });
});

また、クリックデータ属性をすべてのtrに追加する必要がないため、これも適切です。他の良い点は、クラスは実際にはスタイリングにのみ使用されるため、クラスを使用してクリックをトリガーしないことです。

前述の解決策の1つは、セル内の単一のリンクといくつかのCSSを使用して、このリンクをセル全体に拡張することです。

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

<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属性を追加することだけです。

私はこの問題を解決するために多くの時間を費やしてきました。

3つのアプローチがあります。

1. JavaScriptを使用します。明らかな欠点：新しいタブをネイティブで開くことはできず、行にカーソルを合わせると、通常のリンクのようにステータスバーに表示されません。アクセシビリティも問題です。

2. HTML / CSSのみを使用します。これは<a>、各の下に入れ子にすることを意味します<td>。このフィドルのような単純なアプローチは機能しません- クリック可能な表面が各列で必ずしも等しいとは限らないためです。これはUXの深刻な問題です。また、<button>行にaが必要な場合、それを<a>タグの下にネストすることは有効なHTMLではありません（ブラウザーはそれで問題ありません）。

   このアプローチを実装する他の3つの方法を見つけました。最初は大丈夫です、他の2つは素晴らしいではありません。

   a）この例を見てください：

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* A hack to overcome differences between Chrome and Firefox */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   動作しますが、ChromeとFirefoxの間に不整合があるため、違いを克服するにはブラウザ固有のハックが必要です。また、Chromeでは常にセルのコンテンツが上に配置されるため、特に行の高さが変化する場合は、長いテキストで問題が発生する可能性があります。

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

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

   b2。 { display: contents; }まだ実験段階です。具体的には、Edgeではサポートされていません。

   c）に設定<td>し{ height: --some-fixed-value; }ます。これは十分に柔軟ではありません。

3. 私が真剣に考えることをお勧めする最後のアプローチは、クリック可能な行をまったく使用しないことです。クリック可能な行は優れたUXエクスペリエンスではありません。それらを視覚的にクリック可能としてマークするのは簡単ではなく、ボタンのように複数のパーツが行内でクリック可能である場合に課題があります。したがって、実行可能な代替策は<a>、最初の列にのみタグを付け、通常のリンクとして表示し、行全体をナビゲートする役割を与えることです。

ここに別の方法があります...

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";

      });

});

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

＃をURLに置き換え、tabindex="0"任意の要素をフォーカス可能にします

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

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

次に、jqueryを使用して次のように言います。

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

「div」タグを使用しないのはなぜですか。...

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>