我如何使用 append 在 HTML 中的表格主体中使用 javascript function 作用于复选框点击？

Question

我一直在使用以下资源：

而我的 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)"  /> &nbsp; </td> 
                  <td><input type="checkbox" name="Team2_checkbox" id="2" onchange="doalert(this)" /> &nbsp; </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>

选中时的复选框什么都不做，但取消选中时它会显示警报，所以我不太确定问题出在哪里。

Answer 1

JavaScript、function中的名称区分大小写。 你有错误：

 var table=document.getElementByID("checky");

应该：

 var table=document.getElementById("checky");

更改 function 名称getElementByID -> getElementById 。

纠正这个小错误，一切都会正常。

Answer 2

您的错误是试图返回。 this只返回this将返回输入元素，这不是你想要得到的，你想要返回的是this.checked它将返回true或false ，具体取决于复选框是否被选中

我已经重写了你发现下面的变化

<!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)" /> &nbsp; </td>
                <td><input type="checkbox" name="Team2_checkbox" id="2" onchange="doalert(this.checked)" /> &nbsp; </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>

我如何使用 append 在 HTML 中的表格主体中使用 javascript function 作用于复选框点击？

问题描述

2 个解决方案

解决方案1
0 已采纳 2023-01-12 22:07:33

解决方案2
0 2023-01-12 22:21:30

我如何使用 append 在 HTML 中的表格主体中使用 javascript function 作用于复选框点击？

问题描述

2 个解决方案

解决方案1 0 已采纳 2023-01-12 22:07:33

解决方案2 0 2023-01-12 22:21:30

解决方案1
0 已采纳 2023-01-12 22:07:33

解决方案2
0 2023-01-12 22:21:30