我如何使用 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