无法用HTML打印表格



我正在尝试使用JavaScript在HTML中打印表。当我试图打印表格时,它只会给我一张空白页。这是我的HTML代码:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="gen.js"></script>
<link rel="stylesheet" href = "index.css">
</head>
<body onload="print()">
<div id="tt"></div>
</body>
</html>

这是我的JavaScript文件:

function print(){
// console.log("?")
var time = Number(localStorage.getItem("time"))
// console.log(typeof time)
var nClass = Number(localStorage.getItem("nClass"))
var duration = localStorage.getItem("duration")
var subjectsRaw = localStorage.getItem("arr")
var subjects = JSON.parse(subjectsRaw)
document.getElementById('tt').innerHTML = "<table border = 1>"
for(var i = 0; i < 5; i++){
console.log('test')
document.getElementById('tt').innerHTML = "<tr>"
for (let j = 0; j < nClass; j++) {
console.log('test2')
document.getElementById('tt').innerHTML = '<td>' + subjects[Math.floor(Math.random() * subjects.length + 0)] + '</td>'

}
document.getElementById('tt').innerHTML = "</tr>"
document.getElementById('tt').innerHTML = "<br>"
}
document.getElementById('tt').innerHTML = "</table>"

EDIT:现在使用DOM进行打印。

每次分配给innerHTML时,都会覆盖元素,而不是附加到它。您不能像使用DOM方法那样以增量方式构建HTML,因为每次分配给innerHTML时,它都会将其解析为一个完整的HTML片段。

您应该改为追加到一个字符串,并在末尾指定给innerHTML

function print() {
// console.log("?")
var time = Number(localStorage.getItem("time"))
// console.log(typeof time)
var nClass = Number(localStorage.getItem("nClass"))
var duration = localStorage.getItem("duration")
var subjectsRaw = localStorage.getItem("arr")
var subjects = JSON.parse(subjectsRaw)
var html = "<table border = 1>"
for (var i = 0; i < 5; i++) {
console.log('test')
html += "<tr>"
for (let j = 0; j < nClass; j++) {
console.log('test2')
html += '<td>' + subjects[Math.floor(Math.random() * subjects.length + 0)] + '</td>'
}
html += "</tr>"
}
html += "</table>"
document.getElementById("tt").innerHTML = html;
}

最新更新