<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 未經排序的 -->
<table class = 'grid-table' id="tablea" border="1">
<tr>
<th>員工工號</th>
<th>員工姓名</th>
<th>員工年齡</th>
</tr>
</table>
<!-- 按員工工號排序 -->
<table class = 'grid-table' id="tableb" border="1">
<tr>
<th>員工工號</th>
<th>員工姓名</th>
<th>員工年齡</th>
</tr>
</table>
<!-- 按員工年齡排序 -->
<table class = 'grid-table' id="tablec" border="1">
<tr>
<th>員工工號</th>
<th>員工姓名</th>
<th>員工年齡</th>
</tr>
</table>
</body>
<script> $(function(){ var people = [ { 'card_id':'0001', 'name':'p1', 'age':'25' }, { 'card_id':'0022', 'name':'p2', 'age':'22' }, { 'card_id':'0004', 'name':'p3', 'age':'66' } ]; //$.each()是對數組，json和dom結構等的遍歷,語法為$.each(arr,func)
//而原生JS中則是[].forEach(function(value,index,array){
//code something
// });
//arr.forEach(function(value,index,array){
// array[index] == value; //結果為true
// sum+=value;
// });
$.each(people,function(index,value){ $("#tablea").append('<tr><td>' + value.card_id +
'</td><td>' + value.name +
'</td><td>' + value.age + '</td></tr>'); }); var card_id_people = people.sort(function(a,b){ if(a.card_id < b.card_id){ return -1; }else if(a.card_id > b.card_id){ return 1; }else{ return 0; }; }); console.log(card_id_people); $.each(card_id_people,function(index,value){ $("#tableb").append('<tr><td>' + value.card_id +
'</td><td>' + value.name +
'</td><td>' + value.age + '</td></tr>'); }); var age_people = people.sort(function(a,b){ if(a.age < b.age){ return -1; }else if(a.age > b.age){ return 1; }else{ return 0; }; }); console.log(age_people); $.each(card_id_people,function(index,value){ $("#tablec").append('<tr><td>' + value.card_id +
'</td><td>' + value.name +
'</td><td>' + value.age + '</td></tr>'); }); }) </script>
</html>
