使用 HTML DOM 输出数组
问题
如何利用 html dom 技术将多行数据以数组的形式输出？
思路
可以通过访问 HTML DOM 元素的 innerText 属性来获取输入的值，并将其存储到数组中。
具体操作
-
保存数据：
- 当点击“保存”按钮时，从输入字段中获取姓名和年龄的值。
- 使用 HTML DOM 将其添加到列表中。
-
上传数据：
- 当点击“上传”按钮时，获取列表中所有的行元素。
- 遍历每行，并从每个单元格中提取文本内容。
- 将提取到的值存储到一个数组中。
- 最后，在浏览器控制台输出该数组。
代码实现
<input id="name" placeholder="姓名" />
<input id="age" placeholder="年龄" />
<button id="save">保存</button>
<table id="list">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="upload">上传</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>`;
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);
});注意
- 在遍历行元素时，需要使用扩展运算符 [...lineElements]，因为 lineElements 是类数组，不能直接用 forEach 遍历。
- 在提取单元格中的文本内容时，需要过滤掉空白单元格，因为拼接 HTML 代码时可能会产生一些空白单元格。
