我正在尝试用网站上用户的数据制作一个表格。我添加了删除该行的选项，但出现错误
"undefined is not an object (evaluating '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>任何想法可能是什么问题？非常感谢
最佳答案
您不需要在函数 addHtmlTableRow() 中循环，只需将类添加到 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>关于javascript - "Undefined is not an object"尝试引用 HTML 中的单元格时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66648869/