'表格排序-数据获取和绑定'

zhouxiaotian · zhouxiaotian · commit 474712a6ac86 · 2017-08-06T10:24:28.000+08:00
diff --git a/WEEK2/DAY5/index.html b/WEEK2/DAY5/index.html
@@ -17,16 +17,11 @@
     </tr>
     </thead>
     <tbody>
-    <tr>
+    <!--<tr>
         <td>1</td>
         <td>xxx</td>
         <td>25</td>
-    </tr>
-    <tr>
-        <td>2</td>
-        <td>xxx</td>
-        <td>26</td>
-    </tr>
+    </tr>-->
     </tbody>
 </table>
 
diff --git a/WEEK2/DAY5/js/index.js b/WEEK2/DAY5/js/index.js
@@ -0,0 +1,31 @@
+var stuList = document.getElementById('stuList'),
+    stuHead = stuList.tHead,
+    stuBody = stuList.tBodies[0],
+    stuHeadList = stuHead.getElementsByTagName('th'),
+    stuRows = stuBody.rows;
+
+//->AJAX&#33719;&#21462;&#25968;&#25454;&#28982;&#21518;&#20570;&#25968;&#25454;&#32465;&#23450;
+~function () {
+    //->GET DATA
+    var stuData = null;
+    var xhr = new XMLHttpRequest;
+    xhr.open('GET', 'json/data.json', false);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            stuData = utils.toJSON(xhr.responseText);
+        }
+    };
+    xhr.send(null);
+
+    //->BIND DATA
+    var str = ``;
+    for (var i = 0; i < stuData.length; i++) {
+        var cur = stuData[i];
+        str += `<tr>
+            <td>${cur.id}</td>
+            <td>${cur.name}</td>
+            <td>${cur.age}</td>
+        </tr>`;
+    }
+    stuBody.innerHTML = str;
+}();
