如何進行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 && /^2\d{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 ]
效果圖：
