动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
width: 300px;
margin: 50px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid black;
}
thead > tr > th {
height: 50px;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>科目</th>
<th>考试</th>
<th>数据</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- <script>
//对象存储数据
var data = [
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "88",
age: 26,
score: 98,
},
];
//往tbody里面创建行,通过数组的长度可以获取
var tbody = document.querySelector("tbody");
for (var i = 0; i < data.length; i++) {
//创建行
var tr = document.createElement("tr");
tbody.appendChild(tr);
//行里面创建单元格,单元格的数量取决于每个对象里面的属性个数,for循环遍历
//遍历循环,通过遍历角标
//for(var j in obj){
//j 循环得到的是属性名;obj[j]得到的是属性值
// }
for (var j in data[i]) {
//创建单元格
var td = document.createElement("td");
console.log(data[i][j]);
td.innerHTML = data[i][j];
//把对象的属性值给td
tr.appendChild(td);
}
//创建有删除的单元格
var td = document.createElement("td");
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
//删除行
var as = document.querySelectorAll("a");
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//点击删除按钮时,当前行的所有内容被删除,找到链接a所在的行(链接的爸爸的爸爸,node.remove child(child))
this.parentNode.parentNode.remove();
};
}
</script> -->
<!-- <script>
var data = [
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "88",
age: 26,
score: 98,
},
];
var tbody=document.querySelector('tbody');
for(var i=0;i<data.length;i++){
var tr=document.createElement('tr');
tbody.appendChild(tr)
for(var j in data[i]){
console.log(data[i][j]);
var td=document.createElement('td');
td.innerHTML=data[i][j];
tr.appendChild(td);
}
var td=document.createElement('td');
//阻止页面的跳转
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td)
}
var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
tbody.removeChild( this.parentNode.parentNode);
}
}
</script> -->
<script>
var data = [
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
{
name: "zh",
age: 26,
score: 98,
},
];
var tbody = document.querySelector("tbody");
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
for (var j in data[i]) {
console.log(data[i][j])
var td = document.createElement('td')
td.innerHTML=data[i][j];
tr.appendChild(td)
}
var td =document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td)
}
var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通