包裝HTML表格行<a>標籤

Question

是否可以在<a>標籤中包裝整個表格行？我希望整行成爲可點擊的鏈接。

如果我嘗試以下方法，在鏈接的上方和表外呈現：

此：

<table> 
<a href="value_url"><tr><td>value</td><td>value</td></tr></a> 
<a href="value_url"><tr><td>value</td><td>value</td></tr></a> 
</table> 

呈現這樣的：

<a href="value_url"></a> 
<a href="value_url"></a> 
<table> 
<tr><td>value</td><td>value</td></tr> 
<tr><td>value</td><td>value</td></tr> 
</table> 

Answer 1

在每個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>的直接後代。

作爲一個解決方案，你可以要麼把一個<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> 

或者你可以綁定一個onClick處理器的<tr>使用JavaScript。一個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

這是無效的HTML有比thead，tbody或tfoot其他任何元素一個table的直接孩子，而那些元素只有tr作爲他們的有效的孩子。

其他任何內容必須在td或th之內纔有效。

你所看到的是瀏覽器重構你的DOM，使其儘可能有效。依賴這種行爲的問題在於不同的瀏覽器以不同的方式作出反應。

如果你需要一個tr是互動的（並點擊這些元素引導某處/做某事），你應該使用JavaScript。

但是，簡短的回答，是的，您可以可以做到這一點，但這樣做是無效的，所以請不要這樣做。

對於交互式表的行，雖然，一種解決方案（在普通的JavaScript）：

var rows = document.getElementsByTagName('tr'), 
    url; 

for (var i=0,len=rows.length; i<len; i++){ 
    rows[i].onclick = function(){ 
     uri = this.getAttribute('data-url'); 
     window.location = uri; 
    }; 
} 

JS Fiddle demo。

（其中，顯然，要求tr元素具有data-url屬性來指定，他們應該鏈接到。）

Answer 4

爲什麼你不想就tr點擊事件？不可能有像你想要的錨標籤，所以你可以做點擊事件和添加aditional CSS使它看起來像錨。

的Jquery：

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

Answer 5

你可以使用onclick，這樣你就能得到上述內容動態

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

http://jsfiddle.net/ankJw/

Answer 6

只是在附加給別人我要補充一點，我personnaly喜歡在ASP的情況下做這樣的

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

。 NET MVC像

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

Answer 7

另一種簡單的，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/