[英]Is there a more efficient way to write this?
只是在我的老师想出的一个学校项目上工作,该项目应该是用伪代码编写的,但是我将其进一步发展并用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>
有没有一种方法可以简化此过程,所以我不必将所有内容复制/粘贴27次并为td项目制作27个具有不同ID的单独表?
如果您能为我解决这个问题-您真棒:D
您可以使用for
如下填充在表中的数据
x
和y
,将其删除 return false;
从for
这是造成循环运行一次,然后从函数返回控制 i
从数组中获取元素和相应元素的动态顺序ID innerHTML
删除+=
以防止在单击按钮时添加重复数据 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";
}
}
我并没有真正应该做的事情,所以我只解决您实际正在做的事情。 在没有其他输入的情况下,我看不到按钮的指向,因此我只是将脚本移至要修改的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.