js 动态生成表格案例

<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的

<body>
<table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody>
</table>
</body>

<2>样式

<style>*{padding:0;margin:0;}table{width:500px;margin:100px auto;border-collapse:collapse;/*边框合并模式*/text-align:center;}td,th{  /*td是后面tbody中动态创建的单元格，th是thead里面那一行中的单元格*/border:1px solid #333;}thead tr{height:40px;background-color: #cccccc;}

<3>js动态创建表格：

第一步：先准备数据，一共有三个人的成绩，作为三个对象放进数组中

 var datas=[{name:"甲",subject:"javascript",score:100},{name:"乙",subject:"javascirpt",score:99},{name:"丙",subject:"javascript",score:98}];

第二步：在tbody里面创建每一行，行数就等于datas数组的长度，有几个人的成绩就有几行

for(var i=0;i<datas.length;i++)
{var tr=document.createElement("tr");tbody.appendChild(tr);
}

第三步：在已经创建好的行 tr 中，创建单元格, 注意是跟数据有关的三个单元格，td单元格的数量取决于datas[ ] 数组中每个对象的属性个数

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");tr.appendChild(td);td.innerHTMl=datas[i][k]; }
}

这里用for循环遍历数组， k得到的是属性名，obj[k]得到的是属性值

　　　　for( var k in obj)　{

　　　　}

第四步：在每一行里面创建有删除二字的单元格：

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");tr.appendChild(td);td.innerHTML=datas[i][k];}var td=document.createElement("td");tr.appendChild(td);td.innerHTML="<a href="javascript:;">删除</a>" ;
}

第五步：删除操作，点击“删除”，所点击的那一行就会被删除

var as=document.querySelectorAll("a");
for(var i=0; i<as.length;i++)
{as[i].οnclick=function(){tbody.removeChild(this.parentNode.ParentNode);}
}

全部完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;}table{width:500px;margin:100px auto;border-collapse:collapse;/*边框合并模式*/text-align:center;}td,th{border:1px solid #333;}thead tr{height:40px;background-color: #cccccc;}</style>
</head>
<body>
<table><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody>
</table>
</body>
</html>
<script>//1,先准备数据var datas=[{name:"甲",subject:"javascript",score:100},{name:"乙",subject:"javascirpt",score:99},{name:"丙",subject:"javascript",score:98}];//2,往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行var tbody=document.querySelector("tbody");for(var i=0;i<datas.length;i++)  //外面的for循环 是 行tr
    {var tr=document.createElement("tr");tbody.appendChild(tr);//3,往tr每一行里面创建单元格（跟数据有关系的3个单元格），td单元格的数量取决于每个对象的属性个数 for循环遍历对象 datas[i]for(var k in datas[i])   //里面的for循环是 列
        {var td=document.createElement("td");  //创建单元格
            tr.appendChild(td);td.innerHTML=datas[i][k]; //把对象里面的属性值 datas[i][k]给td
        }//4，创建有删除二字的单元格var td=document.createElement("td");tr.appendChild(td);td.innerHTML="<a href='javascript:;'>删除</a>";}//5,删除操作var as=document.querySelectorAll("a");for(var i=0;i<as.length;i++){as[i].οnclick=function () {  //点击a 删除 当前a 所在的行（a链接的爸爸的爸爸）tbody.removeChild(this.parentNode.parentNode);}}
</script>

关键代码：

1，var datas=[{ }, { }, { }] ; 用数组准备数据

2，行数是通过数组的长度创建（datas.length)，包含数据的列数是根据数组中每个对象的属性的个数创建 (datas[i] ) , 都是通过for循环遍历，外面的for循环遍历行，里面的for循环遍历列，从而创建单元格

3，td.innerHTML=datas[i][k]; 把数组中每个对象的每个属性值依次赋给单元格 td

4，最后一列的所有“删除”的单元格单独创建，也是根据行数创建

5，td.innerHTML="<a href='javascript:;'>删除</a>"; href属性等于“javascript:;” ,可以避免页面跳转

6，tbody.removeChild(this.parentNode.parentNode; 删除操作中是tbody需要删除某一个孩子（某一行），表示为当前点击的a链接所在单元格的所在行

转载于:https://www.cnblogs.com/shanlu0000/p/11478994.html

js 动态生成表格案例相关推荐

js动态生成表格(原创)
原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
动态生成表格案例（HTML+CSS+JS）
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除. 实现思路为:先创建一个表格和一个表单,将表单中输入的 ...
使用JS动态生成表格数据和分页显示
根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力.同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台. 效果如下: js代码(要引入JQuery): <! ...
JavaScript-178：动态生成表格案例
效果图结构 <table><thead><tr><th>姓名</th><th>科目</th><th>成 ...
php输出动态表格,PHP动态生成表格
好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...
javascript案例：动态生成表格
js案例:动态生成表格一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
html指定表格行列书,js动态生成指定行数的表格
下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值动态生成表格行效果如下图所示: 2.header中添加js代码 function table() ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
js动态生成html表格
刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有 ...

js 动态生成表格案例

js 动态生成表格案例相关推荐

最新文章

热门文章