表格选择 - Html

在Web开发中，表格是必不可少的一部分。表格可以用于展示数据、对比数据、筛选数据等。在表格中，用户可以选择行、列、或者单元格进行操作。本文将介绍如何使用Html来实现表格选择的功能。

Html表格基础知识

在Html中，可以使用<table>标签来创建表格。表格中的每个单元格使用<td>标签来表示。表头则使用<th>标签来表示。示例代码如下：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

这段代码将会渲染出一个包含3列、2行的表格。

选择行或列

在表格中选择行或列可以通过添加一些Javascript代码来实现。一种方法是将行或列的每个单元格添加一个<input>标签，然后使用Javascript来处理这些<input>标签的状态。示例代码如下：

<table id="myTable">
  <tr>
    <th></th>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<script>
  let table = document.getElementById("myTable");
  let checkboxes = table.getElementsByTagName("input");
  for (let i = 1; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', function () {
      for (let j = 1; j < checkboxes.length; j++) {
        if (checkboxes[j] == this) {
          let cells = table.getElementsByTagName("td");
          let index = j - 1;
          for (let k = index; k < cells.length; k += checkboxes.length - 1) {
            cells[k].classList.toggle("selected-row", this.checked);
          }
          break;
        }
      }
    });
  }
</script>

这段代码将会向表格中的每行添加一个复选框。当用户点击复选框时，Javascript代码会将选中行的每个单元格的CSS类切换为selected-row。使用CSS来定义selected-row类的样式，可以让选中的行高亮显示。

选择单元格

在表格中选择单元格可以使用Javascript事件来处理。可以在每个单元格上添加一个click事件处理程序，当用户单击单元格时，事件处理程序会切换CSS类。示例代码如下：

<style>
  td.selected-cell {
    background-color: yellow;
  }

  td {
    padding: 10px;
  }
</style>

<table class="selectable">
  <tr>
    <th></th>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <th>行1</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <th>行2</th>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<script>
  let table = document.querySelector(".selectable");
  let cells = table.getElementsByTagName("td");
  for (let i = 0; i < cells.length; i++) {
    cells[i].addEventListener('click', function () {
      this.classList.toggle("selected-cell");
    });
  }
</script>

这段代码会向表格中的每个单元格添加一个click事件处理程序。当用户单击单元格时，Javascript代码会将单元格的CSS类切换为selected-cell。使用CSS来定义selected-cell类的样式，可以让选中的单元格高亮显示。