<!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 ->
<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>
// original version
// document.write("<table>");
// where 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>");
// change color version comes with parity
document.write("<table>");
for (var h = 1; h <= 9; h ++) {// cycle number of rows
// odd number of lines change color
if (h % 2 == 1) {
document.write("<tr style='background:pink;'>");
} else {
document.write("<tr style='background:#6ff;'>");
}
for (var g = 1; g <= h; g ++) {// cycle number column, and the column number of rows to be less than or equal
// color every other column
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>