初学js---动态生成表格
Posted ayayi-666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学js---动态生成表格相关的知识，希望对你有一定的参考价值。
动态生成表格并封装函数：
1.动态创建表头
*通过createElement(‘table‘)创建一个表格标签——>通过createElement(‘thead‘)创建表头——>通过table.appendChild(thead‘)将表头包含到表格中;
**同样的方法创建tr并将tr放到thead中
***再将表头数据依次放到表头：通过
将表头数据放到表头（theadData为表头的数据，函数的参数item为数据内容）
将创建表头的方法封装成函数function creatHead(parent,headData)（）这里的parent为装table的容器
2.动态创建tbody
*通过createElement（‘tbody’）创建tbody并将其放到table中——>
同样方法将数据放到tbody中
**将创建tbody的方法封装成函数function creatBody(table,bodyData)（）{}
3.进行删除操作
*给每一行tr再追加一个td用来放删除的操作，这里放了一个a标签，注意要给a标签设置href:javascript:void(0),使a标签点击后不跳转
**由于删除操作是比较严肃的，在删除之前要给一个弹框确定是否删除，当确定要删除后从tbody中删除对应的tr
4.调用函数动态创建表格
*由于生成表头和tbody的方法都进行了函数封装，现在只要再创建将生成表头和tbody的函数放在一起的生成完整表格的函数即可
**使用时调用封装函数就可以了
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态封装表格</title>
<style type="text/css">
#box table{
border-collapse: collapse; /*当有两条边框线时，只显示一条边框线*/
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
//表中的数据项
var bodyData=[
{name:"黄文杰",subject:"语文",scoer:"90"},
{name:"张晓梅",subject:"化学",scoer:"96"},
{name:"李杰凯",subject:"英语",scoer:"80"},
{name:"易梦云",subject:"数学",scoer:"99"},
{name:"王小青",subject:"物理",scoer:"70"},
];
//定义表头内容
var headData=[‘姓名‘,‘科目‘,‘成绩‘,‘操作‘];
var box=document.getElementById(‘box‘);
//调用创建表格的函数
creatTable(box,headData,bodyData);
//定义创建表格的函数
function creatTable(parent,headData,bodyData){
var table=creatHead(parent,headData); //调用创建表头的函数
creatBody(table,bodyData); //调用创建数据项的函数
}
//定义创建表头的函数
function creatHead(parent,headData){
//动态生成table标签
var table=document.createElement(‘table‘);
//将table标签写入box的div中
parent.appendChild(table);
table.border=‘1px‘;
table.width=‘500px‘;
table.cellSpacing=0;
//动态生成表头中的thead标签
var thead=document.createElement(‘thead‘);
//将thead标签写入table
table.appendChild(thead);
//动态生成tr标签
var tr=document.createElement(‘tr‘);
//将tr标签写入thead标签
thead.appendChild(tr);
tr.style.height=‘35px‘;
tr.style.background=‘lightgray‘;
//表头遍历
headData.forEach(function(item){
//动态生成th标签
var th=document.createElement(‘th‘);
//将th标签写入th
tr.appendChild(th);
//将表头数据写入th中
th.innerHTML=item;
})
return table;
}
function creatBody(table,bodyData){
/*设置数据行*/
var tbody=document.createElement(‘tbody‘);
table.appendChild(tbody);
//遍历数据
bodyData.forEach(function(item){
tr=document.createElement(‘tr‘);
tbody.appendChild(tr);
for(var key in item){ //将item这个对象的每一个属性赋给key
var td=document.createElement(‘td‘);
tr.appendChild(td);
td.innerHTML=item[key];
}
/*操作的列*/
var td=document.createElement(‘td‘);
tr.appendChild(td);
var link=document.createElement(‘a‘);
link.href=‘javaScript:void(0)‘;
td.appendChild(link);
link.innerHTML=‘删除‘;
/*删除操作*/
link.onclick=linkclick;
})
function linkclick(){
//提示用户是否删除
var r=confirm(‘是否确认删除‘);
if(r){
//删除
//获取点击
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
}
}
};
</script>
</body>
</html>
以上是关于初学js---动态生成表格的主要内容，如果未能解决你的问题，请参考以下文章