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

本文实例为大家分享了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>

下面是操作后的显示图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js 表格分页ajax 异步加载数据

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f

  • Js表格万条数据瞬间加载实现代码

    Js表格,万条数据瞬间加载 在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行. 于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天 受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中. 也就是说,Flex的DataGrid控件

  • Javascript vue.js表格分页，ajax异步加载数据

    Javascript vue.js表格分页，ajax异步加载数据

    分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

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

    本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下 首先在HTML中编写表格信息 <table width="500px" border="1"> //表格头部信息 <thead> <tr> <th>编号</th> <th>姓名</th> <th>身份</th> <th>操作</th>

  • 在WPF中动态加载XAML中的控件实例代码

    本文实例讲述了在WPF中动态加载XAML中的控件的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using S

  • Android开发中Listview动态加载数据的方法示例

    本文实例讲述了Android开发中Listview动态加载数据的方法.分享给大家供大家参考,具体如下: 最近在研究网络数据加载的问题,比如我有几百,甚至上千条数据,这些数据如果一次性全部加载到arraylist,然后再加载到Listview中.我们必然会去单独开线程来做,这样造成的结果就是会出现等待时间很长,用户体验非常不好.我的想法是动态加载数据,第一次加载十条,然后往下面滑动的时候再追加十条,再往下面滑动的时候再去追加,这样大大减少了用户等待的时间,同时给处理数据留下了时间.网上看到了这样一

  • Python实现爬取网页中动态加载的数据

    在使用python爬虫技术采集数据信息时,经常会遇到在返回的网页信息中,无法抓取动态加载的可用数据.例如,获取某网页中,商品价格时就会出现此类现象.如下图所示.本文将实现爬取网页中类似的动态加载的数据. 1. 那么什么是动态加载的数据? 我们通过requests模块进行数据爬取无法每次都是可见即可得,有些数据是通过非浏览器地址栏中的url请求得到的.而是通过其他请求请求到的数据,那么这些通过其他请求请求到的数据就是动态加载的数据.(猜测有可能是js代码当咱们访问此页面时就会发送得get请求,到其

  • Vue3的setup在el-tab中动态加载组件的方法

    公司某项目需求在页面显示的组件是根据角色变化而变化的,在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件,如下图所示 <template> <component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/> </template> 数据内容大概是这样的 在未使用setup语法糖时候我要引

  • PHP+jQuery实现滚屏无刷新动态加载数据功能详解

    本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • Android实现listview动态加载数据分页的两种方法

    Android实现listview动态加载数据分页的两种方法

    在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:

  • Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    写在前面: jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 具体效果请暂时移步: http://jonmiles.github.io

  • js实现动态加载数据瀑布流

    本文实例为大家分享了js实现动态加载数据瀑布流的具体代码,供大家参考,具体内容如下 实现的功能 1.每次下拉到底部会自动加载下一页的数据2.图片逐渐显示 首先html <!DOCTYPE html> <html lang="zh-CN">     <head>         <meta charset="UTF-8" />         <meta name="viewport" cont

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

随机推荐