如何使用HTML设置表格指定行不可点击且无需单独给td加锚点

结论 #

该需求可以实现，无需为前两行的每个<td>单独添加<a>标签，以下是两种仅通过HTML即可实现的方案：

方案1：阻止第三行点击事件冒泡 #

仅需给第三行的<td>添加onclick="return false"属性，点击第三行时会直接终止事件向上传递到外层的<a>标签，不会触发跳转，不需要修改其他原有结构，修改后代码如下：

<a href="www.google.com">
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

  <tr>
    <td onclick="return false;">Non Clickable</td>
  </tr>
</table>
</a>

该方案改动量最小，完全兼容所有主流浏览器。

方案2：调整结构更符合语义规范 #

如果不希望将整个表格嵌套在<a>标签中（不符合HTML语义规范），也可以拆分可点击区域，将前两行放在同一个<tbody>中绑定跳转事件，第三行单独放置：

<table style="width:100%">
  <tbody onclick="window.location='www.google.com'" style="cursor:pointer">
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
  <tr>
    <td>Non Clickable</td>
  </tr>
</table>

该方案完全不需要使用<a>标签，同样满足需求。

内容的提问来源于stack exchange，提问作者thewebtud