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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
vue prop传值类型检验方式
Jul 30 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP 正则表达式小结
2015/02/12 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python中的字典详细介绍
2014/09/18 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python 批量修改/替换数据的实例
2018/07/25 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Django nginx配置实现过程详解
2020/09/10 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
新年主持词
2014/03/27 职场文书
师德师风建设方案
2014/05/08 职场文书
无房证明范本
2014/09/17 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
Fluentd搭建日志收集服务
2022/09/23 Servers