如何进行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>
效果图：
时间： 2024-08-03 09:28:47