如何进行ajax数据读取和绑定呢？
- 首先创建一个AJAX对象
- 实现数据绑定
- 实现隔行变色
- 编写表格排序的方法（实现按照年龄这一列进行排序）
- 通过文档碎片，把排序后的最新顺序，重新添加到tBody中（通过文档碎片，有效的避免了回流耗性能的问题，浏览器不用每当HTML结果发生改变，就重新对当前的页面进行渲染）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .bg { 8 background: yellowgreen; 9 } 10 </style> 11 </head> 12 <body> 13 <table style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1 14 id="tab"> 15 <thead> 16 <tr> 17 <td>姓名</td> 18 <td>年龄</td> 19 <td>性别</td> 20 </tr> 21 </thead> 22 <tbody> 23 24 </tbody> 25 </table> 26 27 <script type="text/javascript"> 28 var oTab = document.getElementById('tab'); 29 var tHead = oTab.tHead; 30 var oThs = tHead.rows[0].cells; 31 console.log(oThs); 32 var tBody = oTab.tBodies[0]; 33 var oRows = tBody.rows; 34 35 //将json字符串转为json对象 36 function jsonParse(str) { 37 return JSON in window ? JSON.parse(str) : eval('(' + str + ')'); 38 } 39 //实现数据绑定 40 function bind() { 41 var frg = document.createDocumentFragment(); 42 for (var i = 0; i < data.length; i++) { 43 var cur = data[i]; 44 var oTr = document.createElement('tr'); 45 for (var key in cur) { 46 47 var oTd = document.createElement('td'); 48 if (key === 'sex') { 49 oTd.innerHTML = cur[key] === 0 ? '男' : '女'; 50 } else { 51 oTd.innerHTML = cur[key]; 52 } 53 oTr.appendChild(oTd); 54 } 55 frg.appendChild(oTr); 56 } 57 console.log(frg); 58 tBody.appendChild(frg); 59 frg = null; 60 } 61 //创建一个ajax对象 62 var data = null; 63 var xhr = new XMLHttpRequest; 64 xhr.open('get', 'data.txt', true); 65 xhr.send(); 66 xhr.onreadystatechange = function () { 67 68 if (xhr.readyState === 4 && /^2d{2}$/.test(xhr.status)) { 69 var val = xhr.responseText; 70 data = jsonParse(val); 71 bind(); 72 changeBg(); 73 // sort() 74 75 76 } 77 } 78 //实现隔行变色 79 function changeBg() { 80 for (var i = 0; i < oRows.length; i++) { 81 oRows[i].className = i % 2 === 1 ? 'bg' : null; 82 } 83 } 84 //编写表格排序方法：实现按照年龄这一列进行排序 85 function sort() { 86 //把存储所有的行的类数组转换为数组 87 console.log(oRows); 88 var ary = listToArray(oRows); 89 var _this = this; 90 91 //给数组进行排序，按照每一行的第二列中的内容有小到大排序 92 console.log(ary); 93 _this.flag *= -1; 94 ary.sort(function (a, b) { 95 //this->window; 96 return parseFloat(a.cells[1].innerHTML) - parseFloat(b.cells[1].innerHTML) * _this.flag; 97 }) 98 console.log(ary); 99 100 //按照ary中的最新顺序，把每一行重新的添加到tbody中 101 102 var frg = document.createDocumentFragment(); 103 for (var i = 0; i < ary.length; i++) { 104 frg.appendChild(ary[i]); 105 } 106 tBody.appendChild(frg); 107 frg = null; 108 } 109 //当点击第二列，实现一次升序，再点击降序 110 oThs[1].flag = -1; //给当前这一列增加一个自定义属性flag 111 oThs[1].onclick = function () { 112 // sort(); 113 sort.call(this); //this->oThs[1] 114 } 115 //类数组转成数组 116 function listToArray(likeAry) { 117 var ary = []; 118 try { 119 ary = Array.prototype.slice.call(likeAry); 120 } catch (e) { 121 for (var i = 0; i < likeAry.length; i++) { 122 ary[ary.length] = likeAry[i]; 123 } 124 } 125 return ary; 126 } 127 128 </script> 129 </body> 130 </html>
data.txt:
1 [ 2 { 3 'name':'*莉', 4 'age':24, 5 'sex':1 6 },{ 7 'name':'*建东', 8 'age':25, 9 'sex':0 10 },{ 11 'name':'小莉', 12 'age':17, 13 'sex':1 14 },{ 15 'name':'东子', 16 'age':16, 17 'sex':0 18 } 19 ]
效果图：
