如何在 Javascript 中插入 HTML 表格？

Posted 2023-02-22

技术标签:

【中文标题】如何在 Javascript 中插入 HTML 表格？【英文标题】：How to insert an HTML table in Javascript? 【发布时间】：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 操作它？如果没有，您应该首先阅读有关该主题的更多信息，因为如果您不付出任何努力，没有人会为您提供完整的解决方案。我已经研究过了，它有点工作，但仍然是一个问题。我会将其发布在一个新问题中。谢谢！ 【参考方案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 中。