javascript动态向网页中添加表格实现代码


当然,我可以提供一个JavaScript示例代码,用于动态地向网页中添加一个表格。这个示例会创建一个简单的HTML表格,并将其添加到``标签的末尾。


// 创建一个table元素
var table = document.createElement("table");
table.border = 1; // 设置表格边框为1(注意:在实际开发中,推荐使用CSS来设置样式)

// 创建一个tbody元素,并添加到table中
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 假设我们要添加两行数据,每行三列
for (var i = 0; i < 2; i++) {
    // 创建一个tr元素,代表表格的一行
    var tr = document.createElement("tr");
    
    for (var j = 0; j < 3; j++) {
        // 创建一个td元素,并设置其内容
        var td = document.createElement("td");
        td.appendChild(document.createTextNode("行 " + (i + 1) + ", 列 " + (j + 1)));
        // 将td元素添加到tr中
        tr.appendChild(td);
    }
    
    // 将tr元素添加到tbody中
    tbody.appendChild(tr);
}

// 将table元素添加到body的末尾
document.body.appendChild(table);

这段JavaScript代码首先创建了一个`

`元素,并设置了边框(虽然在实际开发中更推荐使用CSS来设置样式)。然后,它创建了一个``元素并将其添加到`
`中。接下来,代码通过两层循环创建了两行三列的表格,每个表格单元格(`
`)的内容都设置了相应的文本。最后,整个``元素被添加到文档的``标签的末尾。

你可以将这段代码添加到HTML文件的`