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 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Vue watch响应数据实现方法解析
Jul 10 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php ci框架验证码实例分析
2013/06/26 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
bootstrap table实例详解
2017/01/06 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
学生信息管理系统python版
2018/10/17 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python