JS表格|极客笔记

JS表格

在网页开发中，表格是一种常用的展示数据的方式。通过JavaScript可以轻松地操作表格，包括创建表格、添加行列、修改数据等。本文将详细介绍如何使用JavaScript来操作表格。

创建表格

在HTML中，通过<table>标签可以创建一个表格，其中包括<tr>（行）和<td>（单元格）标签用来表示表格的结构。我们可以使用JavaScript动态地创建一个表格，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>JS表格</title>
</head>
<body>

  <script>
    // 创建表格元素
    var table = document.createElement('table');

    // 创建表头行
    var headerRow = document.createElement('tr');
    var headerCell1 = document.createElement('td');
    headerCell1.textContent = '姓名';
    var headerCell2 = document.createElement('td');
    headerCell2.textContent = '年龄';
    headerRow.appendChild(headerCell1);
    headerRow.appendChild(headerCell2);
    table.appendChild(headerRow);

    // 创建数据行
    var dataRow1 = document.createElement('tr');
    var dataCell1 = document.createElement('td');
    dataCell1.textContent = '张三';
    var dataCell2 = document.createElement('td');
    dataCell2.textContent = '25';
    dataRow1.appendChild(dataCell1);
    dataRow1.appendChild(dataCell2);
    table.appendChild(dataRow1);

    var dataRow2 = document.createElement('tr');
    var dataCell3 = document.createElement('td');
    dataCell3.textContent = '李四';
    var dataCell4 = document.createElement('td');
    dataCell4.textContent = '30';
    dataRow2.appendChild(dataCell3);
    dataRow2.appendChild(dataCell4);
    table.appendChild(dataRow2);

    document.body.appendChild(table);
  </script>

</body>
</html>

上面的代码创建了一个包含姓名和年龄信息的表格。我们首先通过document.createElement()创建表格元素和表格行元素，然后通过textContent属性设置单元格内的内容，最后通过appendChild()方法将单元格添加到表格中。

添加行列

除了创建表格外，我们还可以通过JavaScript来动态地添加行和列。下面的示例演示了如何添加一行和一列：

<!DOCTYPE html>
<html>
<head>
  <title>JS表格</title>
</head>
<body>

  <table id="myTable">
    <tr>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </table>

  <button onclick="addRow()">添加行</button>
  <button onclick="addColumn()">添加列</button>

  <script>
    function addRow() {
      var table = document.getElementById('myTable');
      var newRow = table.insertRow();
      var cell1 = newRow.insertCell();
      cell1.textContent = '王五';
      var cell2 = newRow.insertCell();
      cell2.textContent = '35';
    }

    function addColumn() {
      var table = document.getElementById('myTable');
      var rows = table.getElementsByTagName('tr');
      for (var i = 0; i < rows.length; i++) {
        var cell = rows[i].insertCell();
        cell.textContent = '男';
      }
    }
  </script>

</body>
</html>

在上面的代码中，我们使用了insertRow()和insertCell()方法来添加新的行和列。addRow()函数在表格末尾添加一行数据，addColumn()函数在每一行末尾添加一个单元格来显示性别信息。

修改数据

除了添加行列，我们还可以通过JavaScript来修改表格中的数据。下面的示例演示了如何修改表格中的姓名和年龄信息：

<!DOCTYPE html>
<html>
<head>
  <title>JS表格</title>
</head>
<body>

  <table>
    <tr>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td id="name1">张三</td>
      <td id="age1">25</td>
    </tr>
    <tr>
      <td id="name2">李四</td>
      <td id="age2">30</td>
    </tr>
  </table>

  <button onclick="updateData()">修改数据</button>

  <script>
    function updateData() {
      var name1 = document.getElementById('name1');
      var age1 = document.getElementById('age1');
      name1.textContent = '赵六';
      age1.textContent = '40';

      var name2 = document.getElementById('name2');
      var age2 = document.getElementById('age2');
      name2.textContent = '王七';
      age2.textContent = '45';
    }
  </script>

</body>
</html>

在updateData()函数中，我们通过getElementById()方法获取指定单元格元素，并使用textContent属性来修改其中的文本内容。这样就可以轻松地修改表格中的数据。