<!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>