JavaScript用用戶指定的行和列制作表格，並在點擊時更改每個單元格的顏色

Question

我有一個代碼，用戶在其中輸入行數和列數。 在給定的行和列的表的創建過程中，每個單元格都有一個onClick事件，用戶單擊任何單元格，單元格的背景顏色就會更改。 在我的代碼中，如何更改單元格的背景顏色？

<body>
    Grid Height:
        <input id="n1" type="number" name="height" min="1" value="1">
    Grid Width:
        <input id="n2" type="number" name="width" min="1" value="1">
    <input type="submit" onclick="makegrid()">
    <table width="100px" height="100px" id="myTable" border="1" style="border-collapse:collapse" >
    </table>
  <script>
        var x,rn,cn;

        function makegrid()// function called after submit button is clicked
        {
            rn = parseInt(document.getElementById("n1").value); //fetches the entered rows by user
            cn = parseInt(document.getElementById("n2").value); //fetches the entered column by user

            for(var r=0;r<rn;r++)
            {
                x=document.getElementById("myTable").insertRow(r); //insert row to the table
                for(var c=0;c<cn;c++)  
                {
                   var y= x.insertCell(c); //insert cells to each row
                }

            }
          }
   </script>

Answer 1

將click偵聽器添加到文檔，檢查clicked元素是否為td如果是，則更改單元格的背景顏色。

 var x, rn, cn; function makegrid() // function called after submit button is clicked { rn = parseInt(document.getElementById("n1").value); //fetches the entered rows by user cn = parseInt(document.getElementById("n2").value); //fetches the entered column by user for (var r = 0; r < rn; r++) { x = document.getElementById("myTable").insertRow(r); //insert row to the table for (var c = 0; c < cn; c++) { var y = x.insertCell(c); //insert cells to each row } } } document.addEventListener('click', ({target}) => { if (target.tagName == "TD") { target.style.backgroundColor = "red"; } });

 Grid Height: <input id="n1" type="number" name="height" min="1" value="1"> Grid Width: <input id="n2" type="number" name="width" min="1" value="1"> <input type="submit" onclick="makegrid()"> <table width="100px" height="100px" id="myTable" border="1" style="border-collapse:collapse"> </table>

JavaScript用用戶指定的行和列制作表格，並在點擊時更改每個單元格的顏色

問題描述

1 個解決方案

解決方案1
0 已采納 2019-07-31 16:50:12

JavaScript用用戶指定的行和列制作表格，並在點擊時更改每個單元格的顏色

問題描述

1 個解決方案

解決方案1 0 已采納 2019-07-31 16:50:12

解決方案1
0 已采納 2019-07-31 16:50:12