如何进行ajax数据读取和绑定呢？

  • 首先创建一个AJAX对象
  • 实现数据绑定
  • 实现隔行变色
  • 编写表格排序的方法（实现按照年龄这一列进行排序）
  • 通过文档碎片，把排序后的最新顺序，重新添加到tBody中（通过文档碎片，有效的避免了回流耗性能的问题，浏览器不用每当HTML结果发生改变，就重新对当前的页面进行渲染）
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .bg {

             background: yellowgreen;

         }

     </style>

 </head>

 <body>

 <table style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1

        id="tab">

     <thead>

     <tr>

         <td>姓名</td>

         <td>年龄</td>

         <td>性别</td>

     </tr>

     </thead>

     <tbody>

     </tbody>

 </table>

 <script type="text/javascript">

     var oTab = document.getElementById('tab');

     var tHead = oTab.tHead;

     var oThs = tHead.rows[0].cells;

     console.log(oThs);

     var tBody = oTab.tBodies[0];

     var oRows = tBody.rows;

     //将json字符串转为json对象

     function jsonParse(str) {

         return JSON in window ? JSON.parse(str) : eval('(' + str + ')');

     }

     //实现数据绑定

     function bind() {

         var frg = document.createDocumentFragment();

         for (var i = 0; i < data.length; i++) {

             var cur = data[i];

             var oTr = document.createElement('tr');

             for (var key in cur) {

                 var oTd = document.createElement('td');

                 if (key === 'sex') {

                     oTd.innerHTML = cur[key] === 0 ? '男' : '女';

                 } else {

                     oTd.innerHTML = cur[key];

                 }

                 oTr.appendChild(oTd);

             }

             frg.appendChild(oTr);

         }

         console.log(frg);

         tBody.appendChild(frg);

         frg = null;

     }

     //创建一个ajax对象

     var data = null;

     var xhr = new XMLHttpRequest;

     xhr.open('get', 'data.txt', true);

     xhr.send();

     xhr.onreadystatechange = function () {

         if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {

             var val = xhr.responseText;

             data = jsonParse(val);

             bind();

             changeBg();

 //            sort()

         }

     }

     //实现隔行变色

     function changeBg() {

         for (var i = 0; i < oRows.length; i++) {

             oRows[i].className = i % 2 === 1 ? 'bg' : null;

         }

     }

     //编写表格排序方法：实现按照年龄这一列进行排序

     function sort() {

         //把存储所有的行的类数组转换为数组

         console.log(oRows);

         var ary = listToArray(oRows);

         var _this = this;

         //给数组进行排序，按照每一行的第二列中的内容有小到大排序

         console.log(ary);

         _this.flag *= -1;

         ary.sort(function (a, b) {

             //this->window;

             return parseFloat(a.cells[1].innerHTML) - parseFloat(b.cells[1].innerHTML) * _this.flag;

         })

         console.log(ary);

         //按照ary中的最新顺序，把每一行重新的添加到tbody中

         var frg = document.createDocumentFragment();

         for (var i = 0; i < ary.length; i++) {

             frg.appendChild(ary[i]);

         }

         tBody.appendChild(frg);

         frg = null;

     }

     //当点击第二列，实现一次升序，再点击降序

     oThs[1].flag = -1;        //给当前这一列增加一个自定义属性flag

     oThs[1].onclick = function () {

     //    sort();

         sort.call(this);    //this->oThs[1]

     }

     //类数组转成数组

     function listToArray(likeAry) {

         var ary = [];

         try {

             ary = Array.prototype.slice.call(likeAry);

         } catch (e) {

             for (var i = 0; i < likeAry.length; i++) {

                 ary[ary.length] = likeAry[i];

             }

         }

         return ary;

     }

 </script>

 </body>

 </html>

data.txt:

 [

 {

 'name':'*莉',

 'age':24,

 'sex':1

 },{

 'name':'*建东',

 'age':25,

 'sex':0

 },{

 'name':'小莉',

 'age':17,

 'sex':1

 },{

 'name':'东子',

 'age':16,

 'sex':0

 }

 ]

效果图：

ajax数据读取和绑定的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  3. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

  4. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  5. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  6. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  7. django建立管理系统之五----单页ajax数据交互

    ajax数据提交: 需求: 1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新 a.可以用刷新页面来实现数据页面的更新 对应的html,实现局部刷新(可以用刷新页面实现,例如 $ ...

  8. kkpager的改进,Ajax数据变化但是页码不变的有关问题

    kkpager的改进,Ajax数据变化但是页码不变的问题kkpager 是一个简单分页展示插件,需要依赖jquery.下载地址:http://www.oschina.net/action/projec ...

  9. ASP.NET中关于XML的AJAX的读取与删除

    一个XML文件,名称就暂定为GroupStudents.xml吧,内容如下: <?xml version="1.0" encoding="utf-8"?& ...

随机推荐

  1. TA-LIB】之MACD

    移动平滑异同平均线(Moving Average Convergence Divergence,简称MACD指标)策略.MACD是查拉尔·阿佩尔(Geral Appel)于1979年提出的,由一快及一 ...

  2. Python变量、赋值及作用域

    ## 变量 - 指向唯一内存地址的一个名字 - 目的是为了更方便地引用内存中的值 - 可以使用id(变量)函数来查看变量的唯一id值,若两者id值相同,则表示两个变量指向同一地址,两个变量的值完全相同 ...

  3. jpeglib的使用

    1. 解压jpeglib tar xvzf libjpeg-turbo-1.2.1.tar.gz 2. 阅读里面的说明文件,得到jpeg解压缩的一般步骤: /*Allocate and initial ...

  4. js过滤和包含数组方法

    let data=[{'Linda':'apple'},{'Linda':'pear'},{'Linda':'apricot'},{'Linda':'peach'},{'Linda':'grape'} ...

  5. CSS计数器（自定义列表）

    概念 CSS3计数器(CSS Counters)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能(自定义有序列表) 与有序列表相比,它的突出特性在于可以对任意元素计数,同时实 ...

  6. Android stadio 工具使用

    android staido 有logcat窗口,她可以显示log信息.还有run窗口. 我以前一直忽略了run窗口,其实蛮重要,蛮好用的.他只会显示你当前运行的进程的log,不用你再去设置filld ...

  7. easyui-datagrid单选模式下隐藏表头的全选框

    easyui-datagrid可以不使用复选框来进行单选,直接使用onSelect和 singleSelect:true就可以实现单选,但是有一些用户会比较习惯使用勾选框,这时会加一列checkbox ...

  8. luogu2221 [HAOI2012]高速公路

    和sdoi的相关分析很像qwq,推柿子然后线段树搞搞 #include <iostream> #include <cstdio> using namespace std; ty ...

  9. 从事IT业一个8年老兵转行前的自我总结2——从《易经》说开来

    近些年一直在读<易经>,收获颇多.以前看不贯的人或物现在可以淡然看定,以前看不开的一些事现在也安然放下,以前看不透的某些事现在也都可看透八九不离十. 古人云:不读<易>不可为将 ...

  10. 使用pip命令报You are using pip version 9.0.3, however version 18.0 is available pip版本过期.解决方案

    使用pip命令安装或卸载第三方库时报You are using pip version 9.0.3, however version 18.0 is available.错误,一般情况下是pip版本过 ...