Question

我想将两张表打印成一行，然后打印生成的网站。到目前为止，这是我的代码：

function genTable() {
  var toPrint = [];
  for (var b = 1; b < 10; b++) {
    var createTrow = document.createElement("TR");
    var createTdata = document.createElement("TD");
    var fillTdata = document.createTextNode(b);
    createTdata.appendChild(fillTdata);
    createTrow.appendChild(createTdata);
    var rowArr = [b]
    for (var a = 1; a < 11; a++) {
      var rndmChars = makeChars(3);
      var createTdata = document.createElement("TD");
      var fillTdata = document.createTextNode(rndmChars);
      createTdata.appendChild(fillTdata);
      createTrow.appendChild(createTdata);
      rowArr.push(rndmChars);
    }
    document.querySelector("#mainTable").appendChild(createTrow);
    toPrint.push(rowArr);
  }
  console.log(toPrint);
}

function makeChars(amount) {
  var rndmText = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!\"§$%&/()=?)";

  for (var i = 0; i < amount; i++) {
    rndmText += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return rndmText;
}
window.onload = function() {
  genTable();
};
/*################
		###Clickhandler###
		################*/
document.querySelector("#reload").addEventListener("click", function() { //Button Clickhändler zum "Absenden" der informationen			
  console.log("Pressed!");
  location.reload();
});
document.querySelector("#printTable").addEventListener("click", function() { //Button Clickhändler zum "Absenden" der informationen			
  console.log("Pressed! Table");
  printData();
});

function printData() {
  var divToPrint = document.getElementById("mainTable");
  newWin = window.open("");
  newWin.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="stylesheet.css"><link rel="javascript" type="text/javascript" href="javascript.js"/></head><body><ul id="newList">');

  var newListUL = newWin.document.getElementById("newList");
  console.log(newListUL);
  for (var i = 0; i < 4; i++) {
    var newListItem = newListUL.createElement("LI");
    newListItem.appendChild(divToPrint);
    console.log(newListItem);
    newListUL.appendChild(newListItem);
  }

  newWin.console.log(newListItem);

  newWin.document.write('</ul></body></html>');
  //newWin.print();
  //newWin.close();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
  <link rel="javascript" type="text/javascript" href="javascript.js" />
  <title>Random Char Table Gen</title>
</head>

<body>
  <table id="mainTable">
    <thead class="bold">
      <!--			  -->
      <th>C't</th>
      <!--			  -->
      <th>ABC</th>
      <!--Tabellenheader-->
      <th>DEF</th>
      <!--			  -->
      <th>GHI</th>
      <!--			  -->
      <th>JKL</th>
      <!--			  -->
      <th>MNO</th>
      <th>PQR</th>
      <th>STU</th>
      <th>VWX</th>
      <th>YZ</th>
      <th>.</th>
    </thead>
    <!-- 				
					New rows and cells will be generate by the Javascript here!
				-->
  </table>
  <button id="printTable" type="button">Print tables</button>
  <button id="reload" type="button">Generate new table</button>
</body>
<script src="javascript.js">
</script>

</html>

我已经尝试将生成的表放入另一个表中，但“master”表没有显示单个表：只有“DOMElement”。

Answer 1

主要问题在于这一行：

var newListItem = newListUL.createElement("LI");

应在createElement对象上调用document方法，如下所示：

var newListItem = document.createElement("LI");

这至少会给你输出。

其次，您会注意到只有最后一个li项具有该表。这是因为这一行：

newListItem.appendChild(divToPrint);

通过此操作，您实际上将<{1}}元素一次又一次地移动到新位置。相反，您可能想要制作副本。这可以使用divToPrint方法，指定您需要深克隆：

cloneNode()

Javascript：将多个表格打印成一行并在之后打印

1 个答案: