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?
Question
I've been using the following resources:
- https://www.w3schools.com/jsref/met_table_insertrow.asp
- https://www.w3resource.com/javascript-exercises/javascript-dom-exercise-5.php
And my HTML code with the javascript function is as follows:
<!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 answers
solution1
0 ACCPTED 2023-01-12 22:07:33
In JavaScript, function names are case sensitive. You have bug in line:
var table=document.getElementByID("checky");
Should be:
var table=document.getElementById("checky");
Change function name getElementByID -> getElementById .
Correct this small bug and everything will work.
solution2
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.