javascript操作向表格中动态加载数据


Posted in Javascript onAugust 27, 2020

本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下

首先在HTML中编写表格信息

<table width="500px" border="1">
 //表格头部信息
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>身份</th>
        <th>操作</th>
      </tr>
    </thead>
    //表格内容信息
    <tbody id="tbBody"></tbody>
</table>

然后编写js代码

<!--script中的type默认为"text/javascript"-->
  <script type="text/javascript">
    //创建一个数组
    var per=[
      {id:'001',name:'张三',job:'学生'},
      {id:'002',name:'张三',job:'学生'},
      {id:'003',name:'张三',job:'学生'},
      {id:'004',name:'张三',job:'学生'}
    ];
    //打开窗口就执行
    window.onload=function () {
      var tbody=document.getElementById('tbBody');
      for(var i=0;i<per.length;i++){
        var trow=getDataRow(per[i]);
        tbody.appendChild(trow)
      }
    }
    //获取数据
    function getDataRow(h) {
      //创建行
      var row=document.createElement('tr');
      /*创建第一列id属性*/
      //创建第一列id
      var idCell=document.createElement('td');
      //向id填充数据
      idCell.innerText=h.id;
      //加入行
      row.appendChild(idCell);
      /*创建第二列属性name 和上面类似*/
      var nameCell=document.createElement('td');
      nameCell.innerText=h.name;
      row.appendChild(nameCell);
      /*创建第三列属性job 和上面类似*/
      var jobCell=document.createElement('td');
      jobCell.innerText=h.job;
      row.appendChild(jobCell);
      //到这里,json中的数据已经添加到表格里面了,下面为每行末尾添加删除按钮
      /*创建第四列属性 删除属性*/
      var deleteCell=document.createElement('td');
      //加入行
      row.appendChild(deleteCell);
      //创建一个删除按钮控件
      var buttonCell=document.createElement('input');
      //setAttribute()方法创建或改变某个新属性,如果指定属性已存在,则只设置该值
      buttonCell.setAttribute('type','button');
      buttonCell.setAttribute('value','删除');
      //删除功能
      buttonCell.onclick=function () {
        if(confirm("确定删除这一行吗?")){
          //找到按钮所在的行之后进行删除 parentNode节点查找
          this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        }
      }
      //吧删除按钮控件加入第四列属性 删除属性
      deleteCell.appendChild(buttonCell);
      //返回行的数据
      return row;
    }
</script>

下面是操作后的显示图

javascript操作向表格中动态加载数据

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

Javascript 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 #Javascript
js实现批量删除功能
Aug 27 #Javascript
js利用拖放实现添加删除
Aug 27 #Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Javascript call及apply应用场景及实例
Aug 26 #Javascript
Javascript类型判断相关例题及解析
Aug 26 #Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 #Javascript
You might like
PHP中文乱码解决方案
2015/03/05 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python用threading实现多线程详解
2017/02/03 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
python 字符串格式化的示例
2020/09/21 Python
python 实现简易的记事本
2020/11/30 Python
python通过cython加密代码
2020/12/11 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
美术教师自我鉴定
2014/02/12 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
战友聚会致辞
2015/07/28 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android