【前端】【JavaScript案例】之用循环语句实现九九乘法表（四种样式）

样式一：

CSS 部分：

table {
    width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

td {
    padding: 10px;
    border: 1px solid #333;
}

JS 部分：

document.write('<table>');
document.write('<tbody>');

for (i = 1; i <= 9; i++) {
    document.write('<tr>')
    for (j = 1; j <= i; j++) {
        document.write('<td>' + j + 'X' + i + '=' + i * j + '</td>')
    }
    document.write('</tr>')
}

document.write('</tbody>');
document.write('</table>');

样式二：

CSS 部分：

table {
    width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

td {
    padding: 10px;
    border: 1px solid #333;
}

JS 部分：

document.write('<table>');
document.write('<tbody>');

for (i = 9; i >= 1; i--) {
    document.write('<tr>')
    for (j = 1; j <= i; j++) {
        document.write('<td>' + j + 'X' + i + '=' + i * j + '</td>')
    }
    document.write('</tr>')
}

document.write('</tbody>');
document.write('</table>');

样式三：

CSS 部分：

table {
    width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

/* 给非空的单元格设置样式 */
td:not(:empty) {
    padding: 10px;
    border: 1px solid #333;
}

JS 部分：

document.write('<table>');
document.write('<tbody>');

for (i = 1; i <= 9; i++) {
    document.write('<tr>')
    //空单元格
    for (j = 1; j <= 9 - i; j++) {
        document.write('<td>' + '</td>')
    }
    for (j = 1; j <= i; j++) {
        document.write('<td>' + j + 'X' + i + '=' + i * j + '</td>')
    }
    document.write('</tr>')
}

document.write('</tbody>');
document.write('</table>');

样式四：

 

CSS 部分：

table {
    width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

/* 给非空的单元格设置样式 */
td:not(:empty) {
    padding: 10px;
    border: 1px solid #333;
}

JS 部分：

document.write('<table>');
document.write('<tbody>');

for (i = 9; i >= 1; i--) {
    document.write('<tr>')
    //空单元格
    for (j = 1; j <= 9 - i; j++) {
        document.write('<td>' + '</td>')
    }
    for (j = 1; j <= i; j++) {
        document.write('<td>' + j + 'X' + i + '=' + i * j + '</td>')
    }
    document.write('</tr>')
}

document.write('</tbody>');
document.write('</table>');