HTML 使表格行可点击

在本文中，我们将介绍如何使用HTML使表格中的行可点击，并为您提供一些示例来说明。

阅读更多：HTML 教程

什么是表格？

在HTML中，表格是由多个行和列组成的二维数据组织形式。表格通常用于展示结构化的数据，比如产品价格、学生成绩等。

HTML的表格由<table>元素定义，每一行由<tr>定义，每一列由<td>定义。

如何使表格行可点击？

要使表格行可点击，可以通过使用JavaScript来实现。下面是一种常见的方法：

首先，为每一行添加一个事件监听器，监听行的click事件。
```
<script>
 var rows = document.getElementsByTagName("tr");
 for (var i = 0; i < rows.length; i++) {
   rows[i].addEventListener("click", function(){
     alert("您点击了一行!");
   });
 }
</script>
```
在上面的示例中，我们使用getElementsByTagName方法来选择所有的行元素，然后为每一行添加click事件监听器。当点击任意一行时，将弹出一个提示框显示”您点击了一行!”。
接下来，您可以根据需要为每一行添加不同的点击事件。例如，您可以在点击行时跳转到另一个页面，或者显示行的详细信息。

示例：在表格行中显示详细信息

下面是一个示例，展示如何在点击表格行时显示行的详细信息：

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
  </tr>
</table>

<div id="details"></div>

<script>
  var rows = document.getElementsByTagName("tr");
  var details = document.getElementById("details");

  for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener("click", function(){
      details.innerHTML = "您点击了：" + this.innerHTML;
    });
  }
</script>

在上面的示例中，我们首先定义了一个具有两行两列的表格。然后，我们将一个空的<div>元素用于显示详细信息。

接下来，我们为每一行添加了一个点击事件监听器。当点击行时，行的HTML内容将会显示在<div>元素中。