HTML可點擊錶行

Question

我使用Twitter的引導，包括對錶行整齊的懸停效果，我想補充了一行時亮起，用戶會期望可點擊。有沒有什麼萬無一失的方法來做到這一點？

是的，我做我的研究，但每一個解決方案是非常尷尬的和有缺陷的最好的。非常感激任何的幫助。

Answer 1

雖然我的谷歌技能是相當真棒這是大多數人會發現... http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

但是，爲了讓人們更方便......什麼簡單給出該行的ID和分配使用jQuery鏈接到該ID？

<table> 
<tr id='link1'> 
    <td>one</td> 
    <td>two</td> 
    <td>three</td> 
    <td>four</td> 
</tr> 
<tr id='link2'> 
    <td>two-one</td> 
    <td>two-two</td> 
    <td>two-three</td> 
    <td>two-four</td> 
</tr> 
</table>​ 

和

$("#link1").click(function(){ 
window.location = "http://stackoverflow.com/questions/12115550/html-clickable-table-rows"; 
}); 
$("#link2").click(function(){ 
window.location = "http:///stackoverflow.com"; 
}); 

也看到這一點：http://jsfiddle.net/avrZG/

Answer 2

沒有jQuery的：

<table> 
<tr id='link1' onclick="document.location='http://stackoverflow.com/about';"> 
    <td>one</td> 
    <td>two</td> 
    <td>three</td> 
    <td>four</td> 
</tr> 
<tr id='link2' onclick="document.location='http://stackoverflow.com/help';"> 
    <td>two-one</td> 
    <td>two-two</td> 
    <td>two-three</td> 
    <td>two-four</td> 
</tr> 
</table> 

Answer 3

的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

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的

$(document).ready(function() { 

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

}); 

我得到的代碼HERE

Answer 4

這不是很清楚你正在嘗試做的，但你可能想要以下。在tr元素中添加tabindex可以在大多數瀏覽器中使用，並且可以通過鼠標單擊或鍵盤選項卡將焦點設置在一行上。

<table> 
    <tr id='link1' tabindex="100"> 
     <td>one</td> 
     <td>two</td> 
     <td>three</td> 
     <td>four</td> 
    </tr> 
    <tr id='link2' tabindex="101"> 
     <td>two-one</td> 
     <td>two-two</td> 
     <td>two-three</td> 
     <td>two-four</td> 
    </tr> 
</table>