html - HTMLテーブルの行をタグでラップする

Answer 1

編集2021：
最近では、よりセマンティックでスクリーンリーダーに適したより優れたオプションがあるようです。たとえば、Jansソリューションを確認してください。

元の回答：
各tdのリンクは適切な代替手段ではなく、jsの使用は少し汚いので、別のhtml/cssアプローチを次に示します。

HTML：

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS：

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

Answer 2

ブラウザはW3C仕様を尊重し、<tr>タグをの直接の子孫としてのみ許可しているため、このようにレンダリングされ<table>ます。

解決策として、同じURLを指す<a>タグをそれぞれ の中に入れることができます。<td>

<table>
    <tr>
        <td>
            <a href="http://url/stuff">
                First column
            </a>
        </td>
        <td>
            <a href="http://url/stuff">
                Second column
            </a>
        </td>
    </tr>
</table>

または、JavaScriptを使用onClickしてハンドラーをにバインドすることもできます。<tr>jQueryの例は次のようになります。

$('table tr').click(function() {
    window.location = 'http://location/here';
});

または、さらに良いことに、委任されたイベント（jQuery 1.7以降）を使用します。

$('table').on('click', 'tr', function() {
    window.location = 'http://location/here';
});

Answer 3

もう1つの単純なCSSのみのソリューションは<a>、ブロック要素に変換することです

<tr>
  <td><a href="#">name 1</a></td><td><a href="#">link 1</a></td>    
</tr>
<tr>
  <td><a href="#">name 2</a></td><td><a href="#">link 2</a></td>    
</tr>

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

td > a {
  display: block;
}

次に、<a>は全体を占め、<td>行の各セルに対してリンクが繰り返される場合、JSなしで行全体をクリック可能にします。

https://jsfiddle.net/evwa451n/

Answer 4

Answer 5

onclickを使用できるため、コンテンツを動的に取得できます

<td onclick="window.location='http://www.google.com';" style='cursor: pointer;'>Hello</td>

http://jsfiddle.net/ankJw/

Answer 6

新しくて凝った解決策： 2021年に、リンクを含むテーブル行のクリーンな解決策がまだないのはおかしいです。代わりに表示グリッドを使用することをお勧めします。repeat(YOUR_COLUMN_COUNT, minmax(0, auto))forを使用grid-template-columnsすると、グリッドがテーブルと非常によく似た動作をするようになります。つまり、列の自動サイズ変更と調整が可能になります。さらに、アンカータグを使用したり、狂わずにスティッキーヘッダーを作成したりすることもできます。

<div style="display: grid; grid-template-columns: repeat(3, minmax(0, auto));">
  <div>Header column 1</div>
  <div>Header column 2 (Any content size works)</div>
  <div>Header column 3</div>
  <a href="https://example.com" style="display: contents;">
    <div>Every column adjusts dynamically</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </a>
  <a href="https://example.com" style="display: contents;">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </a>
  <a href="https://example.com" style="display: contents;">
    <div>Content 1</div>
    <div>Works like a table!</div>
    <div>Content 3</div>
  </a>
</div>

更新：残念ながら、以下の元のソリューションは、テーブルの行がjavascriptで動的に挿入されない限り機能しません（以下の例を参照）。ブラウザは、JavaScriptを介して新しい要素が挿入されるときに構文チェックをスキップするため、アンカータグをテーブルに残して、ブラウザがそれらを外部に移動するのを防ぐことができます。

let tbody = document.getElementById("myTBody");

for (let i = 0; i < 2; i++) {
  let anchor = document.createElement("a");

  anchor.setAttribute("style", "display: contents;");
  anchor.setAttribute("href", "https://example.com");

  let row = document.createElement("tr");

  let col1 = document.createElement("td");
  let col2 = document.createElement("td");
  col1.append(document.createTextNode("Column 1"));
  col2.append(document.createTextNode("My longer Column 2"));

  row.appendChild(col1);
  row.appendChild(col2);

  anchor.appendChild(row);
  tbody.appendChild(anchor);
}

<p>This table doesnt work with anchors around the rows:</p>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <a href="https://example.com" style="display: contents !important;">
      <tr>
        <td>Column 1</td>
        <td>My longer Column 2</td>
      </tr>
    </a>
    <a href="https://example.com" style="display: contents !important">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
  </tbody>
</table>
<p>This table does work with anchors around the rows:</p>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody id="myTBody">
    <!-- Rows get inserted by javascript -->
  </tbody>
</table>

オリジナル：も使用できますdisplay: contents;。これにより、タグの子は、タグの親の子であるかのように動作します。

HTMLの場合：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <a href="https://example.com" style="display: contents;">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
    <a href="https://example.com" style="display: contents;">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </a>
  </tbody>
</table>

ほとんどの場合、さまざまなブラウザでのサポートで十分です（https://caniuse.com/#feat=css-display-contentsを参照）。

Answer 7

クリックイベントを作成したくないのはなぜtrですか？あなたが望むようにアンカータグを持つことはできないので、クリックイベントを作成し、それをアンカーのように見せるために追加のCSSを追加することができます。

Jquery：

$("table tr").click(function() {
    window.location = "http://www.google.com/";
});

Answer 8

他の人に加えて、私は個人的にこのようにすることを好むことを追加する必要があります

<tr onclick="window.location='http://www.google.com';" >
  <td>Text...</td>
</tr>

ASP.NETMVCの場合は次のようにします

<tr onclick="window.location = '@Url.RouteUrl("Product", new { SeName = @product.SeName })';">

Answer 9

ここで提供される解決策は役に立ちましたが、ユーザーがctrl +クリックを実行したり、別のタブで開いたり、URLの移動先を確認したりできないため、window.locationを使用することは良いアプローチではないと思います。私はこのページを作成していますが、クリックせずに作成されたURLを確認したいのですが、Chromeでホバーすると表示されます。これを乗り越えることができなかったので、上記の@Bojanglesの提案を使用して、各tdをリンクでラップすることにしました。

まず、他の人が示唆しているように、各trにdata-hrefを追加します。

次に、jsを介して各tdをリンクでラップします。

    jQuery(document).ready(function ($) {
        //wrap each td's contents with a hyperlink targeting the data-href 
        $('*[data-href]').children("td").wrapInner(function () {
            return "<a href='" + this.parentElement.attributes["data-href"].value + "'></a>";
        });
    });

オプションで、cssを使用して、ハイパーリンクがすべてのセルを使い果たすようにします

    table tr a {
        display:block; /*the link occupies the whole cell, so it's all clickable*/
    }