我如何使用 append 在 HTML 中的表格主体中使用 javascript function 作用于复选框点击？
[英]How do I append a new row to the body of a table in HTML using a javascript function that acts on a checkbox click?
问题描述
I've been using the following resources:
我一直在使用以下资源：
- https://www.w3schools.com/jsref/met_table_insertrow.asp https://www.w3schools.com/jsref/met_table_insertrow.asp
- https://www.w3resource.com/javascript-exercises/javascript-dom-exercise-5.php https://www.w3resource.com/javascript-exercises/javascript-dom-exercise-5.php
And my HTML code with the javascript function is as follows:而我的 HTML 代码与 javascript function 如下：
<!doctype html>
<html>
<head>
<h1>Checkbox Test</h1>
</head>
<body>
<table class="tb" id="checky">
<thead>
<tr>
<th>Checkbox 1</th>
<th>Checkbox 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="Team1_checkbox" id="1" onchange="doalert(this)" /> </td>
<td><input type="checkbox" name="Team2_checkbox" id="2" onchange="doalert(this)" /> </td>
</tr>
</tbody>
</table>
<script>
function doalert(checkboxElem) {
if (checkboxElem.checked) {
var table=document.getElementByID("checky");
var row=table.insertRow(0);
alert("checked");
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
} else {
alert("notchecked");
}
}
</script>
</body>
</html>
The checkbox when checked does nothing but when unchecked it does display the alert, so I'm not quite sure what the issue is.选中时的复选框什么都不做，但取消选中时它会显示警报，所以我不太确定问题出在哪里。
2 个解决方案
解决方案1
0 已采纳 2023-01-12 22:07:33
In JavaScript, function names are case sensitive. JavaScript、function中的名称区分大小写。 You have bug in line:你有错误：
var table=document.getElementByID("checky");
Should be:应该：
var table=document.getElementById("checky");
Change function name getElementByID -> getElementById .更改 function 名称getElementByID -> getElementById 。
Correct this small bug and everything will work.纠正这个小错误，一切都会正常。
解决方案2
0 2023-01-12 22:21:30
Your error is trying to return.您的错误是试图返回。 this returning only this will return the input element and that is not what you want to get, what you want to return is this.checked which will return true or false depending on the if the checkbox is checked or not this只返回this将返回输入元素，这不是你想要得到的，你想要返回的是this.checked它将返回true或false ，具体取决于复选框是否被选中
I have rewritten your find the changes below我已经重写了你发现下面的变化
<!doctype html>
<html>
<head>
<h1>Checkbox Test</h1>
</head>
<body>
<table class="tb" id="checky">
<thead>
<tr>
<th>Checkbox 1</th>
<th>Checkbox 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="Team1_checkbox" id="1" onchange="doalert(this.checked)" /> </td>
<td><input type="checkbox" name="Team2_checkbox" id="2" onchange="doalert(this.checked)" /> </td>
</tr>
</tbody>
</table>
<script>
function doalert(checkboxElem) {
// console.log(checkboxElem);
if (checkboxElem) {
//correct the getElementByID
var table = document.getElementById("checky");
var row = table.insertRow(0);
alert("checked");
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
} else {
alert("notchecked");
}
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.