JS中循环打印表格用于装图片

最新推荐文章于 2024-07-11 10:57:30 发布

原创最新推荐文章于 2024-07-11 10:57:30 发布 · 614 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

3 篇文章

订阅专栏

本文通过一段具体的JavaScript代码，展示了如何使用HTML和JavaScript构建一个图片展示表格。代码中包含了动态生成表格、插入图片以及对不同行进行特殊处理的技巧。

var table = "<table cellspacing=2px>";
        for (var i = 1; i <= 4; i++) {
            table += "<tr>";
            for (var j = 1; j <= 3; j++) {
                if (i == 1) {
                    table += "<td colspan=3 align='center'><h2>美图欣赏</h2></td>";
                    break;
                }
                if (i == 2) {
                    table += "<td align='center'><b>美图" + (i + j - 2) + "</b> <input type='image' src='image/" + (i + j - 2) + ".jpg' class='img'/></td>";
                }
                if (i == 3) {
                    table += "<td align='center'><b>美图" + (i + j) + "</b> <input type='image' src='image/" + (i + j) + ".jpg' class='img'/></td>";
                }
                if (i == 4) {
                    table += "<td align='center'><b>美图" + (i + j + 2) + "</b> <input type='image' src='image/" + (i + j + 2) + ".jpg' class='img'/></td>";
                }
            }
            table += "</tr>";
        }
        table += "</table>";
        document.write(table);

效果如下