JavaScript网页——动态生成表格

article/2025/9/27 15:54:44

1.创建学生数据

分析：因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。

var students = [{name:'吕小布',subject:'JavaScript',score:'100',},{name:'张益达',subject:'JavaScript',score:'98',},{name:'关古神秘',subject:'JavaScript',score:'96',},{name:'张大炮',subject:'JavaScript',score:'97',},]

2.创建行

所有的数据都是放到tbody里面的行里面。所有的数据都是放到tbody里面的行里面.

//2．往tbody里面创建行:有儿个人（通过数组的长度）我们就创建几行var tbody = document.querySelector('tbody');for (let i = 0; i < date.length; i++) {//创建tr行var tr = document.createElement('tr');tbody.appendChild(tr);}

3.创建单元格

行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数

3.//行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象for (const key in students[i]) {//创建单元格var td = document.createElement('td');tr.appendChild(td);}

4.单元格填充数据

把对象里面的属性值给td

 //把对象里面的属性值给tdtd.innerHTML = students[i][key];// k 得到的是属性名   obj[k] 得到的是属性值

5.创建删除单元格

//3.创建删除单元格var td = document.createElement('td');td.innerHTML = '<a href="JavaScript:;">删除</a>';tr.appendChild(td);

6.添加删除操作

//4.删除操作//获取元素var as = document.querySelectorAll('a');//给每个a绑定事件for (let i = 0; i < as.length; i++) {as[i].onclick = function(){//点击a 删除当前a所在的行tbody.removeChild(this.parentNode.parentNode);}}

7.全部代码

<!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>
</head>
<style>table {border-collapse: collapse;margin: 200px auto;}table th {border: 1px solid #c333;width: 120px;height: 50px;text-align: center;background-color: #ccc;}table td {border: 1px solid #c333;width: 80px;height: 40px;text-align: center;}
</style><body><table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>//1.首先准备好学生的数据var students = [{name:'吕小布',subject:'JavaScript',score:'100',},{name:'张益达',subject:'JavaScript',score:'98',},{name:'关古神秘',subject:'JavaScript',score:'96',},{name:'张大炮',subject:'JavaScript',score:'97',},]//2．往tbody里面创建行:有儿个人（通过数组的长度）我们就创建几行var tbody = document.querySelector('tbody');for (let i = 0; i < students.length; i++) {//创建tr行var tr = document.createElement('tr');tbody.appendChild(tr);//行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象for (const key in students[i]) {//创建单元格var td = document.createElement('td');//把对象里面的属性值给tdtd.innerHTML = students[i][key];// k 得到的是属性名   obj[k] 得到的是属性值tr.appendChild(td);}//3.创建删除单元格var td = document.createElement('td');td.innerHTML = '<a href="JavaScript:;">删除</a>';tr.appendChild(td);}//4.删除操作//获取元素var as = document.querySelectorAll('a');//给每个a绑定事件for (let i = 0; i < as.length; i++) {as[i].onclick = function(){//点击a 删除当前a所在的行tbody.removeChild(this.parentNode.parentNode);}}</script>
</body></html>