js渲染乘法表

//1通过 document.getElementById('multiplication-table') 获取到id为 "multiplication-table" 的表格元素，
//2通过 table.querySelector('tbody') 获取到表格的 tbody 元素。
//3使用外层循环遍历乘法表的每一行，循环变量 i 表示当前行数，从 1 到 9。
//4在外层循环内部，创建一个新的表格行元素 tr，用于表示乘法表中的一行。
//5紧接着，使用内层循环来遍历当前行中的每个单元格，循环变量 j 表示当前列数，从 1 到 i。
//6在内层循环中，创建一个新的表格单元格元素 td，表示乘法表中的一个乘法算式。
//7计算乘积，i 与 j 相乘得到的结果，存储在变量 product 中。
//8设置单元格的内容为乘法算式
//9将单元格添加到当前行中
//10当内层循环结束后，将当前行添加到表格的 tbody 中
//11外层循环继续，直到所有行的乘法表达式都被生成并添加到表格中。
//12获取表格元素
let tables = document.getElementById('multiplication-table');
let tbody = tables.querySelector('tbody');
 
// 循环生成九九乘法表格
let table = ''; // 创建一个空字符串用于存储表格内容
for (let i = 1; i <= 9; i++) {
    table += '<tr>'; // 开始行的拼接
    for (let j = 1; j <= i; j++) {
        table += '<td>'; // 开始单元格的拼接
        table += j + 'x' + i + '=' + i * j + ' '; // 单元格内容的拼接
        table += '</td>'; // 结束单元格的拼接
    }
    table += '</tr>'; // 结束行的拼接
}
 
// 将生成的表格内容添加到表格主体中
document.getElementById('multiplication-table').innerHTML = table;