未捕获的类型错误：无法读取未定义的属性“insertRow”
Posted
技术标签:
【中文标题】未捕获的类型错误：无法读取未定义的属性“insertRow”【英文标题】：Uncaught TypeError: Cannot read property 'insertRow' of undefined 【发布时间】：2021-03-15 00:30:07 【问题描述】：编辑以包含所有代码 如果我取消 tbody 参考，我会回到这个错误 “未捕获的 TypeError：regTable.insertRow 不是 addRegistration 的函数”
我在使用这种将表单数据添加到表中的 javascript 方法时遇到了问题。 在用户单击按钮时填写表单信息后，应将其添加到表格中。我已经尝试了其他人在这里发布的几个解决方案，但到目前为止都没有奏效。它收到一条不同的错误消息“未捕获的类型错误：table.insertrow 不是函数”，但它总是在该行停止。我担心当我添加删除按钮时我会遇到同样的问题，因为我一直被困在这里，所以我没有得到这个问题。 我想知道我是否遗漏了一些非常简单的东西，比如拼写错误？这是我在网络编程中的第一堂课，所以它可能是。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Player Registration </title>
<h1>Enter Player Information</h1>
</head>
<body>
<div class="flexbox">
<form id="registration" action="#">
<p> <label for="name">Name:</label>
<input id="name" type="text" autofocus required></p>
<p><label for="slevel">Skill level:</label></p>
<input id="sLevel" type="text" ></p>
<p> <label for="email">Email:</label>
<input id="email" type="email" ></p> required></p>
<p> <label for="city">City:</label>
<input id="city" type="text" ></p>
<p> <input type = "button" value = "Register" id="saveButton"> </p>
</form>
</div>
<hr>
<div>
<table id="registration" >
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Email</th>
<th>City</th>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Level</td>
<td>Email</td>
<td>City</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
document.getElementById("saveButton").onclick = function() addRegistration();
function addRegistration()
var regTable = document.getElementById("registration").getElementsByTagName('tbody')[0];
var newRow = regTable.insertRow(-1);
var cell1 = insertCell(0);
var cell2 = insertCell(1);
var cell3 = insertCell(2);
var cell4 = insertCell(3);
cell1.innerHTML = "name";
cell2.innerHTML = "slevel";
cell3.innerHTML = "email";
cell4.innerHTML = "city";
</script>
</html>
【问题讨论】：
您应该选择表格元素，而不是 tbody。此外，如果没有更多上下文，我看不到注册元素以知道是否存在问题。 不，因为 .getElementsByTagName('tbody') 没有产生错误 【参考方案1】：insertRow() 的语法是 tableObject.insertRow(index);。
根据您使用的浏览器或版本，您可能必须实际提供一个索引值，如果是这样，您可以使用 "... regTable.insertRow(-1); 将其添加到末尾。还添加一个 console.log(regTable); 如果它返回 undefined 或 null 那么它要么未定义，要么已定义但没有元素（基本上是 regTable == [ ]）
【讨论】：
【参考方案2】：id 必须是唯一的，并且您的代码中有 2 个 id = "registration"。这就是错误的原因。
但您的 html 中还有其他错误，我已在此处指出。
还要注意你的<p></p>标签，一定要有相同的数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Player Registration </title>
</head>
<body>
<h1>Enter Player Information</h1> <!-- was on a wrong place in your code -->
<div class="flexbox">
<form id="registration-form"> <!-- id must be unique -->
<p>
<label for="name">Name:</label>
<input name="name" type="text" autofocus required>
</p>
<p>
<label for="sLevel">Skill level:</label>
<input name="sLevel" type="text"> <!-- use name= (no id=) -->
</p>
<p>
<label for="email">Email:</label>
<input name="email" type="email" required>
</p>
<p>
<label for="city">City:</label>
<input name="city" type="text">
</p>
<button type="submit">Register</button> <!-- use submit to verify required input -->
</form>
</div>
<hr>
<div>
<table id="registration-table"> <!-- id must be unique -->
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Email</th>
<th>City</th>
</tr><!--this one is missing in your code -->
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
const regForm = document.querySelector('#registration-form')
, tableTbody = document.querySelector('#registration-table tbody')
;
regForm.onsubmit = evt => // when submit is complete (after inputs are verified)
evt.preventDefault() // disable submit (and page re-load)
let newRow = tableTbody.insertRow()
newRow.insertCell().textContent = regForm.name.value // note the use of the
newRow.insertCell().textContent = regForm.sLevel.value // `name` for the inputs
newRow.insertCell().textContent = regForm.email.value // preceded by the
newRow.insertCell().textContent = regForm.city.value // reference of their form
regForm.reset()
</script> <!-- the script is before /body -->
</body>
</html>
【讨论】：
成功了！非常感谢你，现在我只需要弄清楚如何让它从表单中添加输入。它只是添加引号中的内容，而不是从字段中获取数据 @KathrynMcMeen 我添加了一个完整的 HTML，将表单输入插入到表格中。【参考方案3】：您的 html 具有相同的 id。 (form id="registration")
更改您的表 ID。
insertCell 也有错误。
在 insertCell 之前添加 newRow。 newRow.insertCell(0);
<body>
<div class="flexbox">
<form id="registration" action="#">
<p> <label for="name">Name:</label>
<input id="name" type="text" autofocus required></p>
<p><label for="slevel">Skill level:</label> <input id="sLevel" type="text" ></p>
<p> <label for="email">Email:</label> <input id="email" type="email" required></p>
<p> <label for="city">City:</label> <input id="city" type="text" ></p>
<p> <input type = "button" value = "Register" id="saveButton"> </p>
</form>
</div>
<hr>
<div>
<table id="tableRegistration">
<thead>
<tr>
<th>Name</th>
<th>Level</th>
<th>Email</th>
<th>City</th>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Level</td>
<td>Email</td>
<td>City</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
document.getElementById('saveButton').onclick = function() addRegistration();
function addRegistration()
var regTable = document.getElementById("tableRegistration").getElementsByTagName('tbody')[0];
console.log(regTable);
var newRow = regTable.insertRow(0);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = "name";
cell2.innerHTML = "slevel";
cell3.innerHTML = "email";
cell4.innerHTML = "city";
</script>
【讨论】：
在这里看我的回答，你会学到更多；）以上是关于未捕获的类型错误：无法读取未定义的属性“insertRow”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取未定义的属性 toLowerCase
JQuery：未捕获的类型错误：无法读取未定义的属性“调用”
NextJS：未捕获的类型错误：无法读取未定义的属性（读取“属性”）
未捕获的类型错误：无法读取文本字段上未定义错误的属性“toLowerCase”