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

时间:2024-03-13 11:22:25

如果你只是想给表格中的行添加链接, 推荐你去看这个: 如何给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>

这样最终实现的页面即有鼠标悬停的功能, 又有链接功能
html如何给表格中的行添加链接
如果觉得本文对你有帮助, 不妨点个赞, 嘻嘻~