Javascript implements multiplication table

The multiplication table is an important tool for beginners to learn the basics of multiplication, and it is also a common project for programmers to practice their programming skills. In this article, I'll show you how to implement a simple multiplication table using JavaScript.

First of all, we need to clarify the basic structure of the multiplication table. The multiplication table is usually a square table containing numbers from 1 to 10. Each row and column begins with these numbers and fills the grid of the table according to their product.

We can use nested loops to generate this table. The outer loop is used to control the number of rows in the table, and the inner loop is used to generate columns in each row. The specific code is as follows:

for (let i = 1; i <= 10; i++) {
  let row = '';
  for (let j = 1; j <= 10; j++) {
    row += (i * j) + '    ';
  }
  console.log(row);
}

In this code, we first use an outer loop to control the number of rows in the table, looping from 1 to 10. We use the inner loop to generate a row every time the outer loop executes once.

The inner loop loops from 1 to 10. Each time it is executed, the current number of rows and columns are multiplied and the result is added to the string of that row. Here, we have used template strings from ES6 to construct the string, so the result can be separated from the next result using the character.

Finally, we use the console.log() function to output each line to the console.

If you want to print the results to an HTML page, you can modify this code slightly. Specifically, you can use the document.createElement() function to create a table element in the page, and then use the innerHTML attribute to add each row to the table. The code is as follows:

const table = document.createElement('table');
for (let i = 1; i <= 10; i++) {
  let row = '<tr>';
  for (let j = 1; j <= 10; j++) {
    row += '<td>' + (i * j) + '</td>';
  }
  row += '</tr>';
  table.innerHTML += row;
}
document.body.appendChild(table);

In this code, we use the document.createElement() function to create a table element named table. In the outer loop, we construct each row as an HTML element, and use the inner loop to generate elements, taking each product as the cell's content.

Finally, we add these HTML elements to the body element to make it part of the document.

To summarize, in this article, we use JavaScript to generate a simple multiplication table. Whether outputting in the console or generating in a Web page, this is a good practice project. At the same time, we also learned how to use nested loops to generate complex data structures.

The above is the detailed content of Javascript implements multiplication table. For more information, please follow other related articles on the PHP Chinese website!