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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
vue实现倒计时获取验证码效果
2020/04/17 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python3实现随机数
2018/06/25 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python安装selenium包详细过程
2019/07/23 Python
python opencv肤色检测的实现示例
2020/12/21 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
综合素质自我评价评语
2015/03/06 职场文书
公司员工体检通知
2015/04/21 职场文书