如何使用 HTML DOM 技术将表格数据以数组形式输出？
使用 HTML DOM 输出数组
问题
如何利用 html dom 技术将多行数据以数组的形式输出？
思路
可以通过访问 HTML DOM 元素的 innerText 属性来获取输入的值，并将其存储到数组中。
具体操作
-
保存数据：
-
上传数据：
- 当点击“上传”按钮时，获取列表中所有的行元素。
- 遍历每行，并从每个单元格中提取文本内容。
- 将提取到的值存储到一个数组中。
- 最后，在浏览器控制台输出该数组。
代码实现
<input id="name" placeholder="姓名"><input id="age" placeholder="年龄"><button id="save">保存</button>
| 姓名 | 年龄 |
|---|
// 保存
document.getElementById("save").addEventListener("click", () => {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let listHTML = `
<tr>
<td>${name}</td>
<td>${age}</td>
</tr><tr>`;
document.getElementById("list").innerHTML += listHTML;
});
// 上传
document.getElementById("upload").addEventListener("click", () => {
let listElement = document.getElementById("list");
let lineElements = listElement.querySelectorAll("tr");
let result = [];
lineElements.forEach((item) => {
let tds = item.querySelectorAll("td");
if (tds.length) {
let name = tds[0].innerText;
let age = tds[1].innerText;
result.push({ name, age });
}
});
console.log(result);
});<h3>注意</h3>
<ul>
<li>在遍历行元素时，需要使用扩展运算符 [...lineElements]，因为 lineElements 是类数组，不能直接用 forEach 遍历。</li>
<li>在提取单元格中的文本内容时，需要过滤掉空白单元格，因为拼接 HTML 代码时可能会产生一些空白单元格。</li>
</ul>
</tr>