最近在學習vue框架，想使用jquery遍歷與v-for遍歷來實現表格的顯示，這一節寫的是jquery遍歷
html代碼示例如下：
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } table{ margin: 100px auto; border: 1px solid #000; border-collapse: collapse;/*設置表格的邊框是否被合並為一個單一的邊框*/ border-spacing: 0;/*設置相鄰單元格的邊框間的距離*/ } tr{ width: 300px; height: 50px; line-height: 50px; border-bottom: 1px solid #000; background-color: pink; } td,th{ width: 99px; height: 50px; line-height: 50px; text-align: center; border-right: 1px solid #000; } </style> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> </body> </html> <script type="text/javascript"> $.ajax({ url:'ajaxtable.php', type:'get', datatype:'json', success:function(res){ console.log(res); //將數據顯示在頁面上 var str = ""; str +="<table><thead><tr><th>姓名</th><th>年齡</th><th>住址</th></tr></thead><tbody>"; //遍歷數據 $.each(res,function(index,element){ str +="<tr><td>"+element['name']+"</td><td>"+element['age']+"</td><td>"+element['address']+"</td></tr>"; }) //遍歷完成之后 str +="</tbody></table>"; //將表格添加到body中 $('body').append(str); } }) </script>
php代碼示例如下：
<?php header('content-type:text/html;charset=utf-8'); echo file_get_contents('ajaxtable.json'); ?>
json代碼示例如下：
[{
"name":"baby",
"age":27,
"address":"china weifang"
},
{
"name":"黃曉明",
"age":30,
"address":"china yantai"
},
{
"name":"鹿晗",
"age":22,
"address":"china qingdao"
}]