html如何给表格中的行添加链接

如果你只是想给表格中的行添加链接, 推荐你去看这个: 如何给Table/Tr/Td添加超链接?

而如果你在用django框架, 并且想在链接中使用模板标签{% url 'urlpath' %}, 那么该文或许会对你有用
这里我使用的是Bootstrap上面的模板: 模板链接

...
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
    <table class="table table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>电话</th>
        </tr>
      </thead>
      <tbody>
      {% for st in sts %}
      
		{# 这里是关键, 给tr添加链接, 目标地址是学生的详情页#}
        <tr onclick="location.href='{% url 'student:detail' st.id %}';">
          <td>{{ forloop.counter }}</td>
          <td>{{ st.name }}</td>
          <td>{{ st.age }}</td>
          <td>{{ st.sex }}</td>
          <td>{{ st.phone }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

这样最终实现的页面即有鼠标悬停的功能, 又有链接功能
在这里插入图片描述
如果觉得本文对你有帮助, 不妨点个赞, 嘻嘻~

  • 13
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值