动态生成表格

liying999

于 2022-04-10 14:54:07 发布

阅读量120

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liying999/article/details/124078206

版权

<!DOCTYPE html>

<html lang="en">

 
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>案例实现：动态生成表格</title>

<style>

a {

text-decoration: none;

}

 
table {

width: 500px;

margin: 100px auto;

border-collapse: collapse;

text-align: center;

}

 
td,

th {

border: 1px solid #333;

}

 
thead tr {

height: 40px;

background-color: #ccc;

}

</style>

</head>

 
<body>

<table cellspacing="0">

<thead>

<tr>

<th>角色</th>

<th>法术</th>

<th>法力</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<!-- 表格数据动态生成 -->

<!-- <tr>

<td></td>

</tr> -->

</tbody>

</table>

<script>

// 模拟数据：利用对象存储数据

// step1. 准备不同人物的数据

// 数组对象 datas 可以存储任意类型数据

// 每个数组元素 datas[i] 都是一个对象

var datas = [{

// 角色

name: '闻人翊悬',

// 法术

magic: '火系',

// 法力

mana: 85

}, {

name: '申屠子夜',

magic: '水系',

mana: 80

}, {

name: '公仪楚人',

magic: '土系',

mana: 85

}, {

name: '容成墨熙',

magic: '木系',

mana: 90

}, {

name: '轩辕神君',

magic: '金系',

mana: 100

}, {

name: '小新',

magic: '童系',

mana: 100

}];

// console.log(datas.length);

// step2. 所有数据都是放在 tbody 中的 tr 里面

var tbody =document.querySelector('tbody');

for (var i=0;i<datas.length;i++){

//1.创建tr行元素节点

var tr =document.createElement('tr');

//向tbody中追加tr

tbody.appendChild(tr);

 
//2.行里面创建单元格（跟数据有关系的3个单元格）td

//单元格的数量取决于每个对象2 datas[i]里面的属性个数

//结合for 循环遍历对象 datas[i]

for (var k in datas[i]){//内层for循环控制单元格 td

//创建td单元格元素节点

var td =document.createElement('td');

//把对象中的属性值 datas[i][k] 赋值给td单元格

td.innerHTML=datas[i][k];

//向tr中追加单元格 td中的属性值/内容

tr.appendChild(td);

}

 
 
// step3. 创建含有删除的单元格

var td =document.createElement('td');

td.innerHTML = '<a href="JavaScript:;">删除</a>';

tr.appendChild(td);

 
// step4. 删除操作

// 点击 a 删除 当前 a 所在的行(链接的父节点的父节点)

// node.removeChild(child)

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>

运行效果:

liying999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态生成表格

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>案例实现：动态生成表.
复制链接

扫一扫