Javascript 有没有更有效的方法来写这个？_Javascript_Html_Arrays_List

Javascript 有没有更有效的方法来写这个？

javascript html arrays list

Javascript 有没有更有效的方法来写这个？,javascript,html,arrays,list,Javascript,Html,Arrays,List,我的导师提出了一个学校项目，应该用伪代码编写，但我更进一步，用javascript/html编写了一个功能性网站。基本上，有一个假设的学校，有9个年级，每个年级3个教室，每个班9个月。我应该写一个伪代码脚本来说明如何为每个教室生成账单——幼儿园每月80美元，剩下的班级到8年级每月60美元不管怎么说，我很好奇是否有更好的方法来写这个代码并列出每个月的账单——按照老师制定代码的方式，我必须写27次（每个教室3次，9个年级），幼儿园每月80美元，其余班级每月60美元。以下是我目前掌握的情况： <

我的导师提出了一个学校项目，应该用伪代码编写，但我更进一步，用javascript/html编写了一个功能性网站。基本上，有一个假设的学校，有9个年级，每个年级3个教室，每个班9个月。我应该写一个伪代码脚本来说明如何为每个教室生成账单——幼儿园每月80美元，剩下的班级到8年级每月60美元

不管怎么说，我很好奇是否有更好的方法来写这个代码并列出每个月的账单——按照老师制定代码的方式，我必须写27次（每个教室3次，9个年级），幼儿园每月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>


var x=0；
变量y=1；
var i；
var theMonths=[“一月”、“二月”、“三月”、“四月”、“五月”，
“六月”、“七月”、“八月”、“九月”]；
函数javascript（）{
对于（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”；
返回false；
}
}
您的优惠券：
月份：
价格：

有没有一种方法可以简化这一过程，这样我就不必将所有内容复制/粘贴27次，并为td项目制作27个具有不同ID的单独表格

如果你能帮我解决这个问题-你太棒了：D

你可以使用

for

来填充表中的数据，如下所示

变量

和

根本不使用，将其删除

删除

返回false

的代码>用于，这导致循环只运行一次，然后从函数返回控制

使用循环变量

从数组中获取元素和对应元素的动态顺序ID

从

innerHTML

中删除

+=

，以防止在单击按钮时添加重复数据

使用硬编码值8在所有元素上循环，应该是动态的，并且等于数组的长度

var theMonths=[“一月”、“二月”、“三月”、“四月”、“五月”，
“六月”、“七月”、“八月”、“九月”]；
函数javascript（）{
对于（变量i=0；i<8；i++）{
document.getElementById（“td”+（i+1））.innerHTML=theMonths[i]；
document.getElementById（“td”+（i+1）+“a”）.innerHTML=“$60”；
}
}

我真的不知道你应该做什么，所以我只想说明你实际上在做什么。由于没有其他输入，我看不到按钮的意义，所以我只是将脚本移到要修改的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>


您的优惠券：
月份：
价格：
（功能（）{
功能td（文本）{
var column=document.createElement（'td'）
column.textContent=text
返回列
}
var table=document.getElementById（'可降级'），
月份=
[“一月”、“二月”、“三月”、“四月”、“五月”，
“六月”、“七月”、“八月”、“九月”]
月份。forEach（函数（月）{
var行=document.createElement（'tr'）
第2行（td（月））
第行追加子项（td（“$60”））
表.appendChild（行）
})
})()

您可以使用JavaScript生成表，该表允许您使用内部循环。响应将取决于目标浏览器。就我个人而言，我会使用

Date.prototype.toLocaleString

来解决这个问题。创建伪代码的想法是识别需求和重复功能。如果您使用psuedocode，您会发现解决方案是几个变量和几个循环。您并没有真正使用

for

。检查

var theMonths=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”]；函数javascript（）{for（var i=0；i<8；i++）{console.log（document.getElementById（“td”+（i+1））.innerHTML）；docum
<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>