HTML表格行链接

hac*_*osh 13 html jquery html-table

将一行HTML表格作为链接的最佳方法是什么?我目前正在使用jquery对斑马条纹行进行突出显示onmouseover/off选定行,所以如果JavaScript是答案,请使用jquery.

Nic*_*unt 40

我只是用css:

<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
    <td><a href="#">Linky1</a></td>
    <td><a href="#">Data1</a></td>
</tr>
<tr>
    <td><a href="#">Linky2</a></td>
    <td><a href="#">Data2</a></td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)

  • 迄今为止的最佳解决方 浏览器仍然将此视为链接,因此"在标签中打开"或"复制链接"将起作用.其他解决方案打破了我的浏览器 JQuery解决方案可以通过DOM操作自动执行上述操作. (4认同)
  • 我遇到了这个解决方案的问题.如果其中一个表格单元格包含足够的内容来包裹线条,则相邻单元格的高度将不会拉伸到整个高度.您是否找到了此案例的解决方法? (2认同)
  • 这种方法的问题在于你有很多链接,所以如果有人通过tab键/屏幕阅读器等导航内容,他们必须跳过很多链接才能进入下一个链接. (2认同)
  • Bravo使可点击的东西成为一个实际的链接.更好的是,使href在禁用javascript时起作用.如果选项卡是一个问题,请将行上的所有锚点设置为tabIndex = -1 (2认同)

hun*_*ter 18

$(document).ready(function(){
   $("tr").click(function(){
      /* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com">) on the tr and pull it off on click */
      window.location = $(this).attr("url");

   });
});
Run Code Online (Sandbox Code Playgroud)

  • 好的,那很好,但是如何在新窗口中打开它?好像它将是一个<a target="_blank"..> ...也是这样(只有当你点击<a ...>它才会通过推荐者字符串...与js onclick - 没有. .. (2认同)
  • 你可以使用`window.open` (2认同)