初学js---动态生成表格

时间 2019-11-11

标签初学动态生成表格栏目 JavaScript 繁體版

原文原文链接

动态生成表格并封装函数：javascript

1.动态建立表头css

　　*经过createElement('table')建立一个表格标签——>经过createElement('thead')建立表头——>经过table.appendChild(thead')将表头包含到表格中;html

　　　　**一样的方法建立tr并将tr放到thead中java

　　　　　　***再将表头数据依次放到表头：经过app

将表头数据放到表头（theadData为表头的数据，函数的参数item为数据内容）函数

　　将建立表头的方法封装成函数function creatHead(parent,headData)（）这里的parent为装table的容器this

2.动态建立tbodyspa

　　　　*经过createElement（‘tbody’）建立tbody并将其放到table中——>一样方法将数据放到tbody中code

　　　　　　**将建立tbody的方法封装成函数function creatBody(table,bodyData)（）{}htm

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>