535

Bootstrap を使用していますが、以下が機能しません。

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

26 に答える 26

280

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

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

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

[data-href] { cursor: pointer; }

それができるようになったら、JavaScript を使用して、HTML の外でクリック ハンドラーを割り当てたいと思うでしょう。

于 2013-06-17T12:49:26.583 に答える
237

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

<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 に頼らない限り、これはおそらく最適な方法です。

于 2013-06-17T12:50:55.127 に答える
100

リンクされたテーブル行は可能ですが、標準<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"。詳しくはこちらのガイドをご覧ください。

于 2014-04-16T21:41:28.057 に答える
60

次のように、標準の 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たとえば、not none 値に設定するなど、さまざまな方法で包含ブロックを定義できます(上記の例のように)。

詳細については、ここにある のBootstrap ドキュメントを参照してstretched-linkください。

于 2019-08-21T12:24:11.597 に答える
5

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

于 2015-06-06T01:23:14.587 に答える
4

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

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

于 2015-10-19T12:37:05.510 に答える
2

onclick=""初心者にとって使いやすく理解しやすいので、属性を使用することをお勧めします

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>
于 2019-08-07T10:24:18.160 に答える
1

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

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

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

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

    このアプローチを実装する他の 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>、最初の列にのみタグを付け、通常のリンクとして表示し、行全体をナビゲートする役割を与えることです。

于 2019-08-30T00:49:43.950 に答える
0

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

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

      });

});
于 2013-06-17T13:19:33.800 に答える
-1

行にIDを与えることができます。

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

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

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

于 2013-06-17T12:50:08.520 に答える