Question

正在处理我的教师提出的学校项目，应该用伪代码编写，但我更进一步，用javascript / html编写它来创建一个功能性网站。基本上，有一个假设的学校有9个年级，每个年级3个教室，每个班9个月。我应该写一个伪代码脚本来为每个教室制作账单 - 幼儿园每月80美元，剩下的课程每月60美元，直到8年级。

无论如何，我很好奇是否有更好的方法来编写这个代码并列出每月的账单 - 教师编写代码的方式，我必须写27次（每个教室3次）幼儿园每月80美元，其余课程每月60美元。这是我到目前为止所做的：

<body>
    <script>
        var x = 0;
        var y = 1;
        var i;
        var theMonths = ["January", "February", "March", "April", "May",
            "June", "July", "August", "September"];

        function javascript() {
            for (i = 0; i < 10; i++) {
                document.getElementById("td1").innerHTML += theMonths[0];
                document.getElementById("td2").innerHTML += theMonths[1];
                document.getElementById("td3").innerHTML += theMonths[3];
                document.getElementById("td4").innerHTML += theMonths[4];
                document.getElementById("td5").innerHTML += theMonths[5];
                document.getElementById("td6").innerHTML += theMonths[6];
                document.getElementById("td7").innerHTML += theMonths[7];
                document.getElementById("td8").innerHTML += theMonths[8];
                document.getElementById("td1a").innerHTML += "$60";
                document.getElementById("td2a").innerHTML += "$60";
                document.getElementById("td3a").innerHTML += "$60";
                document.getElementById("td4a").innerHTML += "$60";
                document.getElementById("td5a").innerHTML += "$60";
                document.getElementById("td6a").innerHTML += "$60";
                document.getElementById("td7a").innerHTML += "$60";
                document.getElementById("td8a").innerHTML += "$60";
                return false;
            }
        }
    </script>
    <div id="demoDiv">
        <p id="demo">Your coupons:</p>
        <table>
            <tr>
                <th scope="col">Month:</th>
                <th scope="col">Price:</th>
            </tr>
            <tr>
                <td id="td1"></td>
                <td id="td1a"></td>
            </tr>
            <tr>
                <td id="td2"></td>
                <td id="td2a"></td>
            </tr>
            <tr>
                <td id="td3"></td>
                <td id="td3a"></td>
            </tr>
            <tr>
                <td id="td4"></td>
                <td id="td4a"></td>
            </tr>
            <tr>
                <td id="td5"></td>
                <td id="td5a"></td>
            </tr>
            <tr>
                <td id="td6"></td>
                <td id="td6a"></td>
            </tr>
            <tr>
                <td id="td7"></td>
                <td id="td7a"></td>
            </tr>
            <tr>
                <td id="td8"></td>
                <td id="td8a"></td>
            </tr>
        </table>
    </div>
    <input type="button" value="Go!" onclick="javascript();" />
</body>

有没有办法简化这一点，所以我不需要复制/粘贴所有内容27次，并为td项目制作27个具有不同ID的单独表格？

如果你能为我解决这个问题 - 你很棒：D

Answer 1

您可以使用for按照以下方式填充表格中的数据

根本不使用变量x和y，将其删除
从return false;移除了for导致循环只运行一次然后从函数返回控件
使用循环变量i来获取元素的动态顺序ID以及数组中的相应元素
从+=移除了innerHTML，以防止在点击按钮时添加重复数据
使用硬编码值8循环遍历所有元素，应该是动态的并且等于数组的长度。

Demo

var theMonths = ["January", "February", "March", "April", "May",
    "June", "July", "August", "September"];

function javascript() {
    for (var i = 0; i < 8; i++) {
        document.getElementById("td" + (i + 1)).innerHTML = theMonths[i];

        document.getElementById("td" + (i + 1) + "a").innerHTML = "$60";
    }
}

Answer 2

我实际上并不是你应该做的，所以我只会说明你实际在做什么。没有其他输入，我没有看到按钮的重点，所以我只是将脚本移动到你想要修改的DOM元素下面，并生成重复的列。

<body>
    <div>
        <p> Your coupons: </p>
        <table>
          <tbody id=demoTable>
            <tr>
                <th scope="col"> Month: </th>
                <th scope="col"> Price: </th>
            </tr>
          </tbody>
        </table>
    </div>
    <script>
      (function() {
        function td(text) {
          var column = document.createElement('td')
          column.textContent = text
          return column
        }

        var table = document.getElementById('demoTable'),
            months = 
              [ "January", "February", "March", "April", "May",
                "June", "July", "August", "September" ]
        months.forEach(function(month) {
          var row = document.createElement('tr')
          row.appendChild(td(month))
          row.appendChild(td('$60'))
          table.appendChild(row)
        })
      })()
    </script>
</body>

有没有更有效的方式来写这个？

2 个答案: