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 js 重置表单 reset()具体实现代码
Aug 05 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
javascript操作referer详细解析
Mar 10 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
如何正确理解vue中的key详解
Nov 02 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
js版本A*寻路算法
2006/12/22 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python实现二分法算法实例
2015/02/02 Python
python访问系统环境变量的方法
2015/04/29 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Django实现跨域请求过程详解
2019/07/25 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python自省及反射原理实例详解
2020/07/06 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
行政助理的岗位职责
2014/02/18 职场文书
解除同居协议书
2015/01/29 职场文书
社区服务活动感想
2015/08/11 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书