无法在 HTML 中打印表格

Question

I'm trying to print table in HTML by using JavaScript.我正在尝试使用 JavaScript 以 HTML 格式打印表格。 It just gives me a blank page when I try to print the table.当我尝试打印表格时，它只会给我一个空白页。 Here's my HTML code:这是我的 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>

Here's my JavaScript file:这是我的 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: Used DOM to print now.编辑：现在使用 DOM 打印。

Answer 1

You're overwriting the element each time you assign to innerHTML , not appending to it.每次分配给innerHTML时都会覆盖该元素，而不是附加到它。 You can't construct HTML incrementally as you have with DOM methods, because every time you assign to innerHTML it parses it as a complete HTML fragment.您不能像使用 DOM 方法那样逐步构建 HTML，因为每次分配给innerHTML它都会将其解析为一个完整的 HTML 片段。

You should instead append to a string, and assign to innerHTML at the end.您应该改为附加到一个字符串，并在最后分配给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; }

无法在 HTML 中打印表格

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-18 06:05:41

无法在 HTML 中打印表格

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-18 06:05:41

解决方案1
0 已采纳 2020-09-18 06:05:41