添加类 tr 数据表 - JavaScript

在 Web 开发中，向 HTML 表格添加行是非常常见的操作，通常用于动态展示数据。在 JavaScript 中，我们可以通过操作 DOM 元素来实现添加行的功能。

实现方式

1. 创建 tr 元素

首先，我们需要创建一个 tr 元素，表示表格的一行。可以使用 HTML DOM 中的 createElement() 方法创建一个 tr 元素：

let tr = document.createElement("tr");

2. 创建 td 元素

接下来，我们需要为每一列创建一个 td 元素，表示表格的单元格。可以使用 HTML DOM 中的 createElement() 方法创建一个 td 元素：

let td1 = document.createElement("td");
let td2 = document.createElement("td");

3. 添加内容

然后，我们需要为每个单元格添加相应的内容。可以使用 HTML DOM 中的 appendChild() 方法向 td 元素添加文本节点：

let data1 = document.createTextNode("数据1");
let data2 = document.createTextNode("数据2");
td1.appendChild(data1);
td2.appendChild(data2);

4. 将 td 元素添加到 tr 元素中

接下来，我们需要将 td 元素添加到 tr 元素中，组成完整的行：

tr.appendChild(td1);
tr.appendChild(td2);

5. 将 tr 元素添加到表格中

最后，我们需要将 tr 元素添加到表格中。如果你的表格已经存在，可以使用 HTML DOM 中的 appendChild() 方法向表格添加行：

let table = document.getElementById("myTable");
table.appendChild(tr);

完整代码

let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let data1 = document.createTextNode("数据1");
let data2 = document.createTextNode("数据2");
td1.appendChild(data1);
td2.appendChild(data2);
tr.appendChild(td1);
tr.appendChild(td2);
let table = document.getElementById("myTable");
table.appendChild(tr);

总结

添加行是非常基础的操作，但还有许多其他的操作可以结合起来，实现更加复杂的表格功能。同时，我们也需要注意性能问题，对于大型表格，频繁的 DOM 操作可能会导致性能问题。