极客观点
项目管理
HarmonyOS
题目描述
输入姓名、年龄后，点击“保存”按钮，即添加一行数据到列表。可多次添加 - 列表形式展现已添加的多行数据 - 点击上传，则以数组形式输出列表数据
题目来源及自己的思路
通过HTML DOM，使用name和age的innerText属性来访问值
相关代码
粘贴代码文本（请勿用截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据上传</title>
<link rel="stylesheet" href="index.css">
</style>
</head>
<body>
<h1>人员管理系统</h1>
<div>
<input id="name" placeholder="姓名" />
<input id="age" placeholder="年龄" />
<button id="save">保存</button>
</div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
<button id="upload">上传</button>
</body>
<script type="text/javascript" src="./js/index.js"></script>
</html>//保存
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>`;
let tableElement = (document.getElementById("list").innerHTML += listHTML);
});
//上传
document.getElementById("upload").addEventListener("click", () => {
let listElement = document.getElementById("list");
let lineElement = listElement.querySelectorAll("tr");
let result = [];
lineElement.forEach((item) => {
let tds = item.querySelectorAll("td");
let name = tds[0].innerText;
let age = tds[1].innerText;
result.push({ name, age });
});
console.log(result);
});你期待的结果是什么？实际看到的错误信息又是什么？
在Chrome的控制台中显示如下错误
两个问题
1.lineElement是类数组，不能直接用foreach
2.你用innerhtml拼接的 好像每次html产生了一些空白的td，得加个过滤逻辑
更改后的代码