<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
<!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>
