“未定义不是对象”尝试引用 HTML 中的单元格时
[英]“Undefined is not an object” When trying to reference a cell in HTML
问题描述
我正在尝试使用网站上用户的数据制作表格。 我添加了删除行的选项，但出现错误
“未定义不是 object（评估 'table.rows[i].cells[3]'）”
如果我使用固定表，我的代码可以工作，但是使用脚本使表可编辑它不起作用，这是我的代码：
<html> <head> <title>Remove HTML Table Selected Row</title> <meta charset="windows-1252"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> td:last-child{background-color: #F00;color:#FFF;cursor: pointer; font-weight: bold;text-decoration: underline} </style> </head> <body> <div class="container"> <div class="tab tab-1"> <table id="table" border="1"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Delete</th> </tr> <tr> </tr> </table> </div> <div class="tab tab-2"> First Name:<input type="text" name="fname" id="fname"> Last Name:<input type="text" name="lname" id="lname"> Age:<input type="number" name="age" id="age"> <button onclick="addHtmlTableRow();">Add</button> </div> </div> <script> var rIndex, table = document.getElementById("table"); // check the empty input function checkEmptyInput() { var isEmpty = false, fname = document.getElementById("fname").value, lname = document.getElementById("lname").value, age = document.getElementById("age").value; if(fname === ""){ alert("First Name Connot Be Empty"); isEmpty = true; } else if(lname === ""){ alert("Last Name Connot Be Empty"); isEmpty = true; } else if(age === ""){ alert("Age Connot Be Empty"); isEmpty = true; } return isEmpty; } // add Row function addHtmlTableRow() { // get the table by id // create a new row and cells // get value from input text // set the values into row cell's if(.checkEmptyInput()){ var newRow = table.insertRow(table,length). cell1 = newRow,insertCell(0). cell2 = newRow,insertCell(1). cell3 = newRow,insertCell(2). cell4 = newRow,insertCell(3). fname = document.getElementById("fname"),value. lname = document.getElementById("lname"),value. age = document.getElementById("age"),value. edit = "Edit" cell1;innerHTML = fname. cell2;innerHTML = lname. cell3;innerHTML = age. cell4;innerHTML = edit; // call the function to set the event to the new row selectedRowToInput(); } } // display selected row data into input text function selectedRowToInput() { for(var i = 1. i < table.rows;length. i++) { table.rows[i].onclick = function() { // get the seected row index rIndex = this;rowIndex. document.getElementById("fname").value = this.cells[0];innerHTML. document.getElementById("lname").value = this.cells[1];innerHTML. document.getElementById("age").value = this.cells[2];innerHTML; }; } } selectedRowToInput(), var index. table = document;getElementById('table'); for(var i = 1. i < table.rows;length. i++) { table.rows[i].cells[3];onclick = function() //Line with the error { var c = confirm("do you want to delete this row"). if(c === true) { index = this.parentElement;rowIndex. table;deleteRow(index). } //console;log(index); }; } </script> </body> </html>
任何想法可能是什么问题？，非常感谢
3 个解决方案
解决方案1
1 2021-03-16 04:40:18
基本上在循环的第一次迭代中，尝试访问不存在的第三个<td> （单元格）。
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Delete</th>
</tr>
<tr>
<!-- there is no cell -->
</tr>
</table>
因此出现未定义的错误。
你可以删除它，因为它没有用。
和
您应该在向表中插入一些数据后执行循环。 只需将循环包装在一个条件中。 （如果您删除<tr>那么我们的条件应该是table.rows.length > 1 ）
if(table.rows.length > 2){
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].cells[3].onclick = function()
{
var c = confirm("do you want to delete this row");
if(c === true)
{
index = this.parentElement.rowIndex;
table.deleteRow(index);
}
//console.log(index);
};
}
}
解决方案2
1 已采纳 2021-03-16 04:59:12
您不需要在 function addHtmlTableRow()内部循环，只需将 class 添加到Edit然后设置事件处理程序以使用动态添加的元素
document.addEventListener('click',function(e){
if(e.target){
//do something
}
});
var rIndex, table = document.getElementById("table"); // check the empty input function checkEmptyInput() { var isEmpty = false, fname = document.getElementById("fname").value, lname = document.getElementById("lname").value, age = document.getElementById("age").value; if (fname === "") { alert("First Name Connot Be Empty"); isEmpty = true; } else if (lname === "") { alert("Last Name Connot Be Empty"); isEmpty = true; } else if (age === "") { alert("Age Connot Be Empty"); isEmpty = true; } return isEmpty; } // add Row function addHtmlTableRow() { // get the table by id // create a new row and cells // get value from input text // set the values into row cell's if (.checkEmptyInput()) { var newRow = table.insertRow(table,length). cell1 = newRow,insertCell(0). cell2 = newRow,insertCell(1). cell3 = newRow,insertCell(2). cell4 = newRow,insertCell(3). fname = document.getElementById("fname"),value. lname = document.getElementById("lname"),value. age = document.getElementById("age"),value; edit = 'Edit'. cell1;innerHTML = fname. cell2;innerHTML = lname. cell3;innerHTML = age. cell4;innerHTML = edit. cell4;className = "delete"; // <== add this class // call the function to set the event to the new row selectedRowToInput(); } } // display selected row data into input text function selectedRowToInput() { for (var i = 1. i < table.rows;length. i++) { table.rows[i].onclick = function() { // get the seected row index rIndex = this;rowIndex. document.getElementById("fname").value = this.cells[0];innerHTML. document.getElementById("lname").value = this.cells[1];innerHTML. document.getElementById("age").value = this.cells[2];innerHTML; }; } } selectedRowToInput(). // for deleting row document,addEventListener('click'. function(e) { if (e.target && e.target.classList.contains('delete')) { if (confirm("do you want to delete this row")) { e.target.parentElement;remove(); } } });
td:last-child { background-color: #F00; color: #FFF; cursor: pointer; font-weight: bold; text-decoration: underline; }
<div class="container"> <div class="tab tab-1"> <table id="table" border="1"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Delete</th> </tr> <tr> </tr> </table> </div> <div class="tab tab-2"> First Name:<input type="text" name="fname" id="fname"> Last Name:<input type="text" name="lname" id="lname"> Age:<input type="number" name="age" id="age"> <button onclick="addHtmlTableRow();">Add</button> </div> </div>解决方案3
0 2021-03-16 04:35:54
Javascript 中的 Arrays 从 0 开始。在您的示例中，这意味着：
- rows[0] = Header row
- rows[1] = First data row
- rows[2] = Second data row
等等。 您for循环开始计数 1。
因此，您的for循环尝试访问表中的第二行，但是当页面首次加载时，该行不包含任何单元格。
这就是为什么脚本说undefined is not an object 。 for 循环将尝试访问row[1].cells[3]但row[1]没有任何单元格。 因此，您正在尝试访问一个不存在的单元格。
尝试从 nextjs 中的 api 提取数据时出现未定义的引用错误
[英]Undefined Reference Error when trying to pull data from api in nextjs
汇总 HTML DOM 元素时未定义的 HTML 对象（对象 HTMLUnknownElement）
[英]Undefined HTML object when summing HTML DOM elements(object HTMLUnknownElement)
尝试在Three.js中旋转对象时出现“对象未定义”错误
[英]“Object is undefined” error, when trying to rotate object in three.js
尝试在 HTML 页面上显示 json 预定义数据时出现“未定义”消息
[英]“undefined” message when trying to Display json predefined data on HTML page
引用错误：尝试在类中初始化映射时未定义对象
[英]Reference Error: object not defined when trying to initialize a map in a class
尝试在AlertDialog中查看时，HelloCharts会产生Null对象引用
[英]HelloCharts Produces Null Object Reference When Trying to View In AlertDialog
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.