用js写九九乘法表格，附带背景颜色
程序员文章站
2022-05-31 22:05:17
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<!-- css样式 -->
<style>
* {
padding: 0;
margin: 0;
}
table {
width: 800px;
height: 350px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
table,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
</body>
<script>
// 原始版
// document.write("<table>");
// var j = 1;
// while (j <= 9) {
// document.write("<tr>");
// var i = 1;
// while (i <= j) {
// document.write("<td>" + i + "*" + j + "=" + (i*j) + "</td>");
// i++;
// }
// document.write("</tr>");
// j++;
// }
// document.write("</table>");
// 附带奇偶数换色版
document.write("<table>");
for (var h = 1; h <= 9; h++) { //循环行数
// 奇偶数行换色
if (h % 2 == 1) {
document.write("<tr style='background:pink;'>");
} else {
document.write("<tr style='background:#6ff;'>");
}
for (var g = 1; g <= h; g++) { //循环列数，且列要小于等于行数
// 隔列变色
if (g % 2 == 1) {
document.write("<td style='background:pink;'>" + g + "*" + h + "=" + g * h + "</td>");
} else {
document.write("<td style='background:#6ff;'>" + g + "*" + h + "=" + g * h + "</td>");
}
}
document.write("</tr>");
}
document.write("<table>");
</script>
</html>
推荐阅读