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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue实现菜单切换功能
May 08 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
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 - Html Transfer Code
2006/10/09 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php实现paypal 授权登录
2015/05/28 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python实现队列的方法
2015/05/26 Python
Python 含参构造函数实例详解
2017/05/25 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
电气自动化自荐信
2013/10/10 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
初三家长会邀请函
2014/01/18 职场文书
管理失职检讨书
2014/02/12 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
遗产继承公证书
2014/04/09 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
Golang中异常处理机制详解
2021/06/08 Golang