javascript - HTML文件中的Javascript，每行单元格增加的表格

Question

我是 javascript 和 HTML 的新手，我希望在 HTML 文件内的 javascript 中动态创建一个带有循环的表。

我有创建表格的代码，但我很难让它每行增加一个单元格。

我觉得好像1每次for循环运行时我都需要添加我的单元格变量，我假设它类似于cells++但是当我这样做时，html文件不会加载任何东西，关于将它放在我的for循环中的位置有什么想法吗？还是我完全走错了路？

         <script>

            var table = "", rows = 1, cells = 1;

            for (var r = 0; r < rows; r++) {
                table += "<tr>";

                for (var c = 1; c <= cells; c++) {
                    table += "<td>" + c + "</td>"
                }

                table += "</tr>"

            }
            document.write("<table border =1>" + table + "</table>")
        </script>

这就是我想要的样子：

标签： javascripthtmldynamichtml-table

Answer 1

为了获得类似“楼梯”的表格，行数和单元格数应该相等。下面的例子是如何正确地做到这一点。为了更改行数，请将变量的值从 7 更改为您想要的；）

var table = "";
rows = 7;
for (var r = 0; r <= rows; r++) {
    table += "<tr>";
    for (var c = 1; c <= r; c++) {
        table += "<td>" + c + "</td>";
    }
    table += "</tr>";
}
document.write("<table border =1>" + table + "</table>");