js动态生成表格(节点操作)


Posted in Javascript onJanuary 12, 2021

本文实例为大家分享了js动态生成表格的具体代码,供大家参考,具体内容如下

针对DOM节点操作,该案例效果图如下(代码量不多,就没有结构与行为相分离):

js动态生成表格(节点操作)

原生js实现(注释里面解释了做法):

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 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>
 </tbody>
 </table>
 </body>
 <script type="text/javascript">
 //因为里面的学生数据都是动态的,我们需要js动态生成 这里我们需要模拟数据,自己定义好数据
 // 数据我们采取对象形式储存
 //1 先准备好学生的数据
 //2 所有数据都是放到tbody里面(多少人,多少行)
 var datas = [{
 name: '刘舒新',
 subject: 'JavaScript',
 score: '100'
 }, {
 name: '宋祥隆',
 subject: 'JavaScript',
 score: '80'
 },
 {
 name: '崔健',
 subject: 'JavaScript',
 score: '90'
 },
 {
 name: '郄海淼',
 subject: 'JavaScript',
 score: '70'
 }
 ];
 //console.log(datas.length);
 var tbody = document.querySelector('tbody');
 for (var i = 0; i < datas.length; i++) {
 //创建行
 trs = document.createElement('tr');
 tbody.appendChild(trs);
 //创建单元格 td的数量取决于每个对象里面的属性个数
 for(var k in datas[i]){
 //创建单元格
 var td=document.createElement('td');
 //把对象里面的属性值 给td
 //console.log(datas[i][k]);
 td.innerHTML=datas[i][k];
 trs.appendChild(td);
 }
 
 //创建操作删除单元格
 var td=document.createElement('td');
 td.innerHTML='<a href="javascript:;" rel="external nofollow" >删除</a>'
 trs.appendChild(td);
 }
 //删除操作
 var a=document.querySelectorAll('a');
 for(var i=0;i<a.length;i++){
 a[i].onclick=function(){
 tbody.removeChild(this.parentNode.parentNode);
 }
 }
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的ajax跨域请求原理和示例
May 08 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 #Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 #Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 #Javascript
vue实现防抖的实例代码
Jan 11 #Vue.js
详解uniapp的全局变量实现方式
Jan 11 #Javascript
微信小程序抽奖组件的使用步骤
Jan 11 #Javascript
You might like
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python元组知识点总结
2019/02/18 Python
python基于property()函数定义属性
2020/01/22 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
知识竞赛拉拉队口号
2014/06/16 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
刑事和解协议书范本
2014/11/19 职场文书
个人廉政承诺书
2015/04/28 职场文书
工作会议简报
2015/07/20 职场文书
八年级语文教学反思
2016/03/03 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android