如何给 Table/tr/td 添加超链接?

Yoger 的个人博客 / 2 / 3 / 创建于 6年前

<tr  onclick="location.href={{url('路径')}};"> </tr>
<td  onclick="location.href={{url('路径')}};"> </td>

//在新窗口中打开
<tr onclick="window.open('http://www.baidu.com');">  </tr>
<td onclick="window.open('http://www.baidu.com');">  </td>

本作品采用《CC 协议》，转载必须注明作者和本文链接

课程读者 76 声望

暂无个人描述~

《L04 微信小程序从零到发布》

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

《L02 从零构建论坛系统》

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

推荐文章：

更多推荐...

如何打造令后端面试官印象深刻的简历？ 16 / 10 |

如何让DcatAdmin再放光芒,惠及百万PHPer 19 / 39 |

工作小锦囊系列——如何实现一个车辆预定功能（下） 13 / 15 |

目前4个月减重44.6斤，给大家分享一下，感觉整个人精神面貌好了不少~ 15 / 61 |

工作小锦囊系列——如何实现一个车辆预定功能（上） 23 / 13 |

Vim 实用小技巧系列——如何在文本的行首行尾批量添加内容？ 12 / 17 |

讨论数量: 3

antted

18 声望

虽然你可以这么做，但是在目前语义化HTML面前，总感觉怪怪的。

6年前评论

Yoger

课程读者 76 声望

@antted 求大佬指点

6年前评论

ivothgle

课程读者 169 声望 / 咸鱼 @ 沙发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<table border="1">
  <tr>
    <th data-url="http://A.test">A</th>
    <th data-url="http://B.test">B</th>
  </tr>
  <tr>
    <td data-url="http://1.test">1</td>
    <td data-url="http://2.test">2</td>
  </tr>
</table>
<script>
  var ths = document.getElementsByTagName('table');

  ths[0].addEventListener('click', function(event) {
    //TODO 
    console.log(event.target.dataset.url)
  })
</script>
</body>
</html>

这样如何？

6年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

3 篇 2022 年 2 月 1 篇 2021 年 12 月 1 篇 2020 年 11 月 1 篇 2020 年 9 月 2 篇 2019 年 7 月 1 篇 2019 年 5 月 5 篇 2019 年 4 月

4年前 Golang优化-优雅退出 4年前分布式服务数据一致性-redis篇 4年前分布式服务数据一致性-mysql篇 4年前 proto里的message字段的编号 5年前快速使用autossh

22 取消事件触发 8 Windows 下如何使用 Linux 环境开发 PHP 项目！ 2 Golang优化-优雅退出 2 分布式服务数据一致性-mysql篇 1 CentOS7 快速高效,简单安装 lnmp

博客标签

显示input密码

汉字转拼音

Linux环境开发

成为赞助商