如何从多维数组开始使用 DOM 创建表？
Posted
技术标签:
【中文标题】如何从多维数组开始使用 DOM 创建表？【英文标题】：How to create table using DOM starting from a multidimensionnel array? 【发布时间】：2022-01-18 02:23:48 【问题描述】：你好，我想用js dom创建一个html表格，这个表格应该和图片一模一样，包含以下信息
Groupe（或教室），学生姓名，如果学生在显示的日期缺席，则输入 X。此信息已在此多维数组中设置：
var 学生 = [
['1', 'Djohnny James', 'X' , ' ', '', 'X'],
['2', 'Carolina Marry', 'X' , ' ', '', 'X'],
['2' ,'Djimmy BOB', 'X' , ' ', '', 'X']
];
我还是 javascript 的新手，我想不出有效的想法来做这件事......所以任何事情都会很有帮助
【问题讨论】：
是的...但我只能使用这些方法.. appendChild... createElement... CreateTextNode 我必须使用 JavaScript DOM 创建 tr 和 th , td 这让我的头停止工作 hhh 再次尝试谷歌搜索如何从 javascript 数组构建表。尝试一些代码，当它不起作用时，带着你尝试过的代码返回这里并寻求帮助 【参考方案1】：演示链接：https://dojo.telerik.com/AciNolOt/5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create table using Array</title>
<style>
body
font-family: sans-serif;
.table
border: 1px solid #ddd;
border-collapse: collapse;
.table td, .table th
border: 1px solid #ddd;
padding: 10px 20px;
.table th
background-color: limegreen;
color: white;
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Groupe</th>
<th>Nome & Prenoms</th>
<th>21/01/2021</th>
<th>28/01/2021</th>
<th>04/02/2021</th>
<th>11/02/2021</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script>
var Etudiant = [
['1', 'Djohnny James', 'X', ' ', '', 'X'],
['2', 'Carolina Marry', 'X', ' ', '', 'X'],
['2', 'Djimmy BOB', 'X', ' ', '', 'X']
];
Etudiant.map(function (node)
var tableBody = "<tr>";
node.map(function (value)
tableBody += "<td>" + value + "</td>";
);
tableBody += "</tr>";
document.getElementById("tableBody").insertAdjacentHTML("afterend", tableBody);
);
</script>
</body>
</html>
【讨论】：
以上是关于如何从多维数组开始使用 DOM 创建表？的主要内容，如果未能解决你的问题，请参考以下文章