如何在 Javascript 中插入 HTML 表格？答案

【问题标题】：How to insert an HTML table in Javascript?如何在 Javascript 中插入 HTML 表格？
【发布时间】：2018-10-14 22:17:34
【问题描述】：

我需要编写一个名为addMultiTable(rows, cols) 的JS 函数，它将创建一个4 行8 列的乘法表，并将其附加到标题之后：<h1>Multiplication Table</h1>。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table</title>
</head>
<body>
    <h1>Multiplication Table</h1>
    

</body>
</html>

【问题讨论】：

你呢？你在哪里卡住了？你做了什么尝试？什么地方出了错？如何“错”了？
你能告诉我们你到目前为止尝试了什么吗？你到底在哪里有问题？您是否熟悉 DOM 以及通过 JavaScript 操作它？如果没有，您应该首先阅读有关该主题的更多信息，因为如果您不付出任何努力，没有人会为您提供完整的解决方案。
我已经研究过了，它有点工作，但仍然是一个问题。我会将其发布在一个新问题中。谢谢！

标签： javascript html dom

【解决方案1】：

这应该对你有用，记住有几种方法可以解决这个问题

function addMultiTable(rows, cols) {
var table = document.createElement("table"),
    elem = document.getElementsByTagName("h1")[0],
    i = 1,
    j = 1,
    val = 0;

for( i; i <= rows; i++ ) {
    var row = document.createElement("tr");

    for( j; j <= cols; j++) {
        var col = document.createElement("td");
        val = i * j;
        col.innerHTML = val;
        row.appendChild(col);
    }
    j = 1;
    table.appendChild(row);
}
elem.parentNode.insertBefore(table,elem.nextSibling);
}
addMultiTable(4,8);

【讨论】：

你能解释一下为什么它需要这部分val = i*j吗？
这是每个表格单元格的值。当前行号乘以当前列号
而.insertBefore 是undefined。

【解决方案2】：

    function addMultiTable(rows, cols) {
    var myHeader = document.getElementsByTagName("h1")[0];
    var table = document.createElement("table");

        
    for(i=0; i < rows; i++ ) {
       var row = document.createElement("tr");
       table.appendChild(row);
       for (j = 0; j < cols; j++) {
        var cell = document.createElement("td");
        cell.innerHTML = (i+1)*(j+1);//value inside cells
        row.appendChild(cell);
           
       }
       table.appendChild(row);
    }
    myHeader.appendChild(table);
}

【讨论】：

【解决方案3】：

使用 jQuery .append() 函数将表格追加到 div 中。

你可以在https://jsfiddle.net/stktjo67/找到.append()的demo

这里是 .append() http://api.jquery.com/append/的文档链接

【讨论】：