JS 创建表格并编辑后下载 - 代码示例及解析
<div id="tableContainer"></div>
<script>
function createTable() {
var tableData = [
["姓名", "年龄", "地址"],
["张三", "25", "北京"],
["李四", "30", "上海"],
["王五", "28", "广州"]
];
var table = document.createElement("table");
for (var i = 0; i < tableData.length; i++) {
var row = document.createElement("tr");
for (var j = 0; j < tableData[i].length; j++) {
var cell = document.createElement(i === 0 ? "th" : "td");
var text = document.createTextNode(tableData[i][j]);
cell.appendChild(text);
row.appendChild(cell);
}
table.appendChild(row);
}
document.getElementById("tableContainer").innerHTML = "";
document.getElementById("tableContainer").appendChild(table);
}
function downloadTable() {
var tableHTML = document.getElementById("tableContainer").innerHTML;
// 创建一个临时链接
var link = document.createElement("a");
link.href = "data:text/html;charset=utf-8," + encodeURIComponent(tableHTML);
link.download = "table.html";
link.style.display = "none";
// 将链接添加到页面并触发点击事件
document.body.appendChild(link);
link.click();
// 清理临时链接
document.body.removeChild(link);
}
</script>
`元素`tableContainer`中动态创建表格。`createTable`函数使用嵌套的循环遍历`tableData`数组，并使用`createElement`和`appendChild`方法创建和添加表格行和单元格。
在downloadTable函数中，我们首先获取表格的HTML内容，然后使用createElement创建一个临时链接。我们将表格的HTML内容编码为URI，并将其设置为链接的href属性。然后，我们指定下载的文件名为table.html。最后，将链接添加到页面，并使用click方法触发点击事件。最后，我们在document.body中删除链接。
当用户点击“下载表格”按钮时，将下载一个名为table.html的文件，其中包含动态创建的表格的内容。
原文地址: https://www.cveoy.top/t/topic/pxq3 著作权归作者所有。请勿转载和采集!