Question

我想在JSP中创建一个动态表。表中必须输入的数据来自数组。

var array = data.split("##");

我目前正计划通过innerHTML在div中插入表格

document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column 
<tr>... <td>...</td></tr></script>
"</table>";

你们有更好的方法来解决这个问题吗？如何从innerHTML字符串中删除脚本？感谢您的提前帮助

Answer 1

您可以在HTML5中使用<template>一个新标签。
我不知道您的行的结构，但是您只需要将行的HTML代码编写到模板中，并为要在

中使用的单元格添加一些名称或类

document.querySelector();

在数组和模板中使用foreach，可以将子节点附加到表的正文中。在下面的链接中，可以更好地解释谁使用模板。

https://www.w3schools.com/tags/tag_template.asp

Answer 2

您可以避免通过字符串直接生成HTML，然后通过直接通过JavaScript操纵HTMLTableElement来将其手动添加到页面中的需求。

调用HTMLTableElement#insertRow()时，您将添加一个新的HTMLTableRowElement
呼叫HTMLTableRowElement#insertCell会添加一个新的HTMLCellElement
您可以设置textContent或createTextNode和appendChild来设置单元格的内容。结果是相同的-都是选项。

// sample data
var exceptionData = [
  [1, "ERROR"],
  [2, "WARNING"],
  [3, "INFORMATION"],
  [4, "ERROR"],
  [5, "WARNING"],
  [6, "INFORMATION"],
  [7, "OTHER"],
  [8, "OTHER"]
];


//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table 

fillTable(table, exceptionData);

function fillTable(table, data) {
  for (var i = 0; i < data.length; i++) {
    var rowData = data[i];

    var tableRow = table.insertRow();

    //setting textContent of the cell
    var idCell = tableRow.insertCell();
    var id = rowData[0];
    idCell.textContent = id;

    //appending a textNode child to the cell
    var typeCell = tableRow.insertCell();
    var type = document.createTextNode(rowData[1]);
    typeCell.appendChild(type)

  }
}

table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
}

<div id="tableDiv">
  <table id="data">
    <tr><th>Exception ID</th><th>Type</th></tr>
  </table>
</div>

如果您已经有一张桌子，这将起作用。如果要在内存中创建表，则也可以使用Document#createElement进行操作，然后通过appendChild添加它。我添加了HTMLTableELement#createTHead来展示它，但您不必这样做。我找不到从表API中以编程方式添加<th>元素的方法，因此我也使用Document#createElement来制作它们-<thead>是不错的添加，但不能对于如何呈现表格至关重要。

// sample data
var tableConfig = ["Exception ID", "Type"];

var exceptionData = [
  [1, "ERROR"],
  [2, "WARNING"],
  [3, "INFORMATION"],
  [4, "ERROR"],
  [5, "WARNING"],
  [6, "INFORMATION"],
  [7, "OTHER"],
  [8, "OTHER"]
];


//how make the table and put the data in
var table = createTable(tableConfig);

fillTable(table, exceptionData);

document.getElementById("tableDiv").appendChild(table);

function createTable(config) {
  var table = document.createElement("table");
  
  var tHead = table.createTHead();
  var headerRow = tHead.insertRow();
  
  for(var i = 0; i < config.length; i++) {
    var th = document.createElement("th");
    th.textContent = config[i];
    
    headerRow.appendChild(th);
  }
  return table;
}

function fillTable(table, data) {
  for (var i = 0; i < data.length; i++) {
    var rowData = data[i];

    var tableRow = table.insertRow();

    for(var j = 0; j < rowData.length; j++) {
      tableRow.insertCell().textContent = rowData[j]; //create and set the content
    }
  }
}

table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
}

<div id="tableDiv"></div>

在内存中创建表然后追加它的好处是，如果您大量更新表，则会使browser reflow最小化。在第一个示例中，该表将触发重排以添加行，添加单元格，向该单元格添加数据，并且每个过程都可能非常昂贵。对于大型数据集，这可能会导致非常糟糕的性能。如果您在DOM外部创建表然后附加表，则将触发一次重排，即使成本很高，重排也要好很多倍。

最后，这是在ES6中重写的第二个示例，主要是为了避免使用普通的for循环，而推荐使用for...of循环。

// sample data
const tableConfig = ["Exception ID", "Type"];

const exceptionData = [
  [1, "ERROR"],
  [2, "WARNING"],
  [3, "INFORMATION"],
  [4, "ERROR"],
  [5, "WARNING"],
  [6, "INFORMATION"],
  [7, "OTHER"],
  [8, "OTHER"]
];


//how make the table and put the data in
const table = createTable(tableConfig);

fillTable(table, exceptionData);

document.getElementById("tableDiv").appendChild(table);

function createTable(config) {
  const table = document.createElement("table");
  
  const tHead = table.createTHead();
  const headerRow = tHead.insertRow();
  
  for(header of config) {
    const th = document.createElement("th");
    th.textContent = header;
    
    headerRow.appendChild(th);
  }
  return table;
}

function fillTable(table, data) {
  for (rowData of data) {
    const tableRow = table.insertRow();

    for(cellData of rowData) {
      tableRow.insertCell().textContent = cellData; //create and set the content
    }
  }
}

table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
}

<div id="tableDiv"></div>

Answer 3

好，您有对象数组，您想在表格右侧显示数据。然后按照下面的代码。

在JSP页面中，写上带有标题的空表。

<table id="tableID">
  <thead>
      <th>Header</th>
  <thead>
  <tbody>
  </tbody>
 </table>

在JS文件中，写在下面

var text = ""
var i;
for (i = 0; i < array.length; i++) { 
 text += <tr><td>array[ i ]</td></tr>;
}

$('#tableID').find('tbody').html(text); // Jquery

是否可以使用JavaScript innerHTML创建动态表？

3 个答案: