js表格添加最后一行数据

在JavaScript中向表格添加最后一行数据，可以使用DOM操作来实现。以下是基础概念及相关操作：

一、基础概念

DOM（Document Object Model）
- DOM是将HTML文档表示为树形结构的一种方式，允许JavaScript对HTML元素进行操作。

表格元素（<table>、<tr>、<td>）
- <table>：定义表格。
- <tr>：定义表格中的行。
- <td>：定义表格中的单元格。

二、优势

动态性
- 可以根据用户的操作或者程序的逻辑动态地更新表格内容，无需重新加载整个页面。

交互性
- 提高用户与网页之间的交互体验，例如在数据录入界面中实时添加新数据到表格展示。

三、类型（这里指添加行的方式类型）

直接创建元素并添加
- 通过document.createElement方法创建<tr>和<td>元素，然后设置其内容并添加到表格中。

使用模板字符串
- 构建包含新行HTML代码的字符串，然后将其插入到表格的末尾。

四、应用场景

数据录入系统
- 当用户在表单中输入数据后，点击提交按钮，将输入的数据以新行的形式添加到显示数据的表格中。

数据统计展示
- 在实时统计数据更新时，将新的统计结果添加到表格的最后一行进行展示。

五、示例代码（以直接创建元素为例）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>添加表格行示例</title>
</head>

<body>
    <table id="myTable" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
    </table>
    <button onclick="addRow()">添加行</button>

    <script>
        function addRow() {
            // 获取表格元素
            var table = document.getElementById('myTable');
            // 创建新行
            var newRow = table.insertRow(-1);
            // 创建姓名单元格并设置内容
            var nameCell = newRow.insertCell(0);
            nameCell.innerHTML = '李四';
            // 创建年龄单元格并设置内容
            var ageCell = newRow.insertCell(1);
            ageCell.innerHTML = '25';
        }
    </script>
</body>

</html>

在上述代码中：

首先定义了一个简单的HTML表格，包含表头和一行初始数据。
当点击“添加行”按钮时，addRow函数被调用。
- 在addRow函数中，通过document.getElementById获取表格元素。
- 然后使用insertRow(-1)方法在表格的最后插入新行（-1表示最后一行）。
- 接着在新行中插入两个单元格（insertCell），并分别设置单元格的内容为新的姓名和年龄数据。

如果遇到问题，例如新添加的行没有显示或者数据显示错误：