Did not talk much, we directly on the code: Look
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: hotpink;
width: 800px;
}
a{
width: 80px;
color: yellow;
display:inline-block;
padding: 10px 0px;
border: 1px solid yellow;
text-align: center;
margin: 2px;
}
</style>
</head>
<body>
<script>
document.write(`<div>`)
var number = 1;
var sb = 1;
for(number = 1; number <= 9; number++){
for(sb = 1;sb <= number;sb++){
document.write(`<a hreg="#">`)
document.write(`${sb}x${number}=${sb * number} `);
document.write(`</a>`)
}document.write(`<br>`);
}
</script>
</body>
Our thoughts and patted Ha!
First, the first time is performed, the outer loop is a number; the cycle so we are -> for (sb = 1; sb <= 1; sb ++); content execution time inside the circulation, are obtained 1 X 1 = 1 . After exiting the loop, the outer loop has a line feed command.
Performing a second cycle number is 2; inner loop is executed twice -> for (sb = 1; sb <= 2; sb ++); two-time inside the inner loop content, is obtained Ix 2 = 2x2 = 2. 4 . Wrap
performing a third cycle number is 3; inner loop is executed twice -> for (sb = 1; sb <= 3; sb ++); 3 times the inner loop execution contents inside, is obtained 1x 3 = 3 2x3 = 3x3 =. 9. . Newline
. . . . . .
And so on, we can get the line 9, the content of each row of the number determined in accordance with the number of outer loop, plus I plus a little to the multiplication table style, to give the following results shown: