JavaScript实现网页动态生成表格
作者:我是Dreamer啊 时间:2024-04-16 09:24:00
JavaScript(JS)网页–动态生成表格,供大家参考,具体内容如下
在网页中,动态生成列表的内容,将数组中的object加入到列表中(没学到数据库)。在HTML中创建thead,然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格,加入删除操作,点击删除可以删除此行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态生成表格</title>
<style>
table {
border-collapse: collapse;
margin-top: 200px;
margin-left: 500px;
}
table th{
border: 1px solid black;
width: 80px;
height: 40px;
text-align: center;
background-color: cornsilk;
}
table td{
border: 1px solid black;
width: 80px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>张三</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>JavaScript</td>
<td>95</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>JavaScript</td>
<td>98</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr>
<tr>
<td>赵六</td>
<td>JavaScript</td>
<td>91</td>
<td><a href="JavaScript:;" >删除</a></td>
</tr> -->
</tbody>
</table>
<script>
//加入数据
var datas = [
{
name:'张三',
subject:'JavaScript',
score:'100'
},
{
name:'李四',
subject:'JavaScript',
score:'95'
},
{
name:'王五',
subject:'JavaScript',
score:'98'
},
{
name:'赵六',
subject:'JavaScript',
score:'92'
}
];
//创建行,有几个人就创建几行
var tbody =document.querySelector('tbody')
for(var i = 0 ; i < datas.length ; i++){
//创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//创建单元格
for (var k in datas[i] ){
var td = document.createElement("td");
td.innerText = datas[i][k];
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 删除当前行
tbody.removeChild(this.parentNode.parentNode);
}
}
// for (var k in Obj){
// k 得到的是属性名
// dbj[k] 得到的是属性值
// }
</script>
</body>
</html>
来源:https://blog.csdn.net/weixin_42579348/article/details/109992409
标签:js,表格


猜你喜欢
如何使用PyCharm将代码上传到GitHub上(图文详解)
2021-02-18 05:13:31

VUE-ElementUI 时间区间选择器的使用
2024-05-09 15:12:21

通过python爬虫赚钱的方法
2023-04-27 11:48:17
js数组的基本用法及数组根据下标(数值或字符)移除元素
2024-04-10 10:40:26
Python实现的建造者模式示例
2023-06-02 07:17:00
Python SMTP发送电子邮件的示例
2023-09-26 17:57:24
Python使用Rich type和TinyDB构建联系人通讯录
2023-07-13 10:33:22

Python实现自定义读写分离代码实例
2023-04-19 14:34:57
vue项目中Eslint校验代码报错的解决方案
2024-05-10 14:09:18

Python中集合创建与使用详解
2022-04-30 05:29:42

Python中xlsx文件转置操作详解(行转列和列转行)
2022-02-18 03:36:34

JavaScript实现动态时钟效果
2024-04-16 10:27:04
ES6中的Promise代码详解
2024-04-18 09:44:19
Python数学建模StatsModels统计回归模型数据的准备
2021-10-08 09:19:24

python 进程间数据共享multiProcess.Manger实现解析
2021-03-25 14:06:53
Python+OpenCV人脸检测原理及示例详解
2021-07-31 19:31:51

探索webpack模块及webpack3新特性
2024-05-21 10:13:48
Update 语句
2009-06-22 12:52:00
判断 iframe 是否加载完成的完美方法
2009-09-24 13:35:00
Python利用watchdog模块监控文件变化
2023-10-23 22:27:22
