如何用JavaScript在指定HTML的div中最优展示表格型数据元素？

嘿，我来帮你梳理下在给定的HTML页面的<div>里，用JavaScript展示JS文件中表格型数据的最优策略～先看看你提供的代码基础：

你的现有代码文件 #

HTML文件 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>SO example</title> 
</head> 
<body> 
  <div id="text_table"></div> 
</body> 
</html>

CSS文件 #

#text_table { top: 10px; right: 10px; left: 10px; }

JS文件 #

var testResults = [ 
  ['Nickname', 'Points', 'Time', 'Difficulty'], 
  ['Nickname', 'Points', 'Time', 'Difficulty'], 
  ['Nickname', 'Points', 'Time', 'Difficulty'], 
  ['Nickname', 'Points', 'Time', 'Difficulty'], 
  ['Nickname', 'Points', 'Time', 'Difficulty'], 
]; 
var textTable = document.getElementById("text_table"); 
for (var i = 0; i < testResults.length; i++) { 
  /* leaders.innerHTML += */ 
};

推荐的两种最优策略 #

1. 原生DOM操作（性能优先，适合大数据量） #

这种方法直接创建表格DOM元素，避免多次拼接innerHTML带来的性能损耗，还能防范XSS风险（如果数据包含用户输入的话）。修改后的JS代码如下：

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Player1', '1500', '02:45', 'Hard'],
  ['Player2', '1200', '03:10', 'Medium'],
  ['Player3', '900', '04:00', 'Easy'],
  ['Player4', '1800', '02:20', 'Hard'],
];

var textTable = document.getElementById("text_table");
// 创建表格容器
const table = document.createElement('table');

// 遍历数据生成行和单元格
testResults.forEach((rowData, rowIndex) => {
  const row = document.createElement('tr');
  rowData.forEach(cellData => {
    // 第一行用<th>表头，其余用<td>单元格
    const cell = document.createElement(rowIndex === 0 ? 'th' : 'td');
    cell.textContent = cellData;
    row.appendChild(cell);
  });
  table.appendChild(row);
});

// 把表格插入到目标div
textTable.appendChild(table);

再给CSS加点样式让表格更接近你想要的效果：

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
  margin: 10px;
}

#text_table table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

#text_table th, #text_table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#text_table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

#text_table tr:nth-child(even) {
  background-color: #f9f9f9;
}

2. 模板字符串拼接（简洁高效，适合中小型数据） #

如果数据量不大，用ES6模板字符串拼接HTML代码会更简洁，开发效率更高：

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Player1', '1500', '02:45', 'Hard'],
  ['Player2', '1200', '03:10', 'Medium'],
  ['Player3', '900', '04:00', 'Easy'],
  ['Player4', '1800', '02:20', 'Hard'],
];

var textTable = document.getElementById("text_table");
// 拼接完整的表格HTML
const tableHtml = `
  <table>
    ${testResults.map((rowData, index) => `
      <tr>
        ${rowData.map(data => `<${index === 0 ? 'th' : 'td'}>${data}</${index === 0 ? 'th' : 'td'}>`).join('')}
      </tr>
    `).join('')}
  </table>
`;

// 插入到div中
textTable.innerHTML = tableHtml;

两种方案对比 #

• 原生DOM操作：性能更优，数据量大时不会频繁触发页面重排重绘；安全性更高，适合处理包含用户输入的数据。
• 模板字符串拼接：代码更简洁易读，开发速度快，适合数据量较小的场景。

内容的提问来源于stack exchange，提问作者techkuz