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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
web前端开发也需要日志
Dec 09 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 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用header函数实现301跳转代码实例
2013/11/25 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Django中Middleware中的函数详解
2019/07/18 Python
Pytorch之finetune使用详解
2020/01/18 Python
django 实现简单的插入视频
2020/04/07 Python
幼儿园毕业寄语
2014/04/03 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
护理目标管理责任书
2014/07/25 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
安全保证书
2015/01/16 职场文书
认真学习保证书
2015/02/26 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
公司新员工欢迎词
2015/09/30 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
python和anaconda的区别
2022/05/06 Python