var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { tbody.removeChild(this.parentNode.parentNode) } var subject = document.querySelector('.subject'); var name = document.querySelector('.name'); var score = document.querySelector('.score'); var info = document.querySelector('.info'); var tbody = document.querySelector('tbody'); var arr = []; info.addEventListener('submit', function (e) { e.preventDefault(); var obj = { name: name.value, subject: subject.value, score: score.value, } arr.push(obj); this.reset(); for (var i = 0; i < arr.length; i++) { var tr = document.createElement('tr'); tr.innerHTML = ` <td>${arr[i].name}</td> <td>${arr[i].subject}</td> <td>${arr[i].score}</td> <td> <a href="javascript:;">删除 </a></td> <td> <button onclick="moveUp(this)">上移</button> <button onclick="moveDown(this)">下移</button> </td> `; } tbody.appendChild(tr); }) 为什么录入name显示undef
时间: 2024-02-14 12:15:47 浏览: 100
Looping through a HTML list with JavaScript.zip
在您的代码中,`name`、`subject` 和 `score` 是通过 `document.querySelector` 获取的,这意味着它们应该对应 HTML 元素的 `class` 属性,而不是 `id` 属性。请检查您的 HTML 代码,确保相应的输入框具有正确的 `class` 属性。
如果您已经确认输入框的 `class` 属性设置正确,但仍然无法录入 `name`,则可能是因为您的 `name` 输入框未正确获取,或者在提交表单之前没有输入任何值。请检查您的代码,确保您已正确获取输入框并在提交表单之前输入了值。
另外,您的代码中还需要将创建 `tr` 元素和更新表格的代码放在同一个循环内。请将 `for` 循环移到 `arr` 数组的外部,将创建 `tr` 元素和更新表格的代码放在循环中。例如:
```
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement('tr');
tr.innerHTML = `
<td>${arr[i].name}</td>
<td>${arr[i].subject}</td>
<td>${arr[i].score}</td>
<td><a href="javascript:;">删除</a></td>
<td>
<button onclick="moveUp(this)">上移</button>
<button onclick="moveDown(this)">下移</button>
</td>
`;
tbody.appendChild(tr);
}
```
希望这些信息能够帮助您解决问题。
阅读全文