初学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>

转载于:https://www.cnblogs.com/ayayi-666/p/9392395.html

初学js---动态生成表格相关推荐

js动态生成表格(原创)
原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
使用JS动态生成表格数据和分页显示
根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力.同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台. 效果如下: js代码(要引入JQuery): <! ...
php输出动态表格,PHP动态生成表格
好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...
html指定表格行列书,js动态生成指定行数的表格
下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值动态生成表格行效果如下图所示: 2.header中添加js代码 function table() ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
js动态生成html表格
刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有 ...
Extjs 动态生成表格
在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法. 要创建一个grid需要确定它的 ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...

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

初学js---动态生成表格相关推荐

最新文章

热门文章