Home > Developer > Web Develop
Recently learning the Vue framework, you want to use jquery traversal and v-for traversal to implement the table display, which is written in the jquery traversal
The HTML code example is as follows:
<HTML><Head><MetaCharSet= "Utf-8"> <title></title> <styletype= "Text/css"> *{padding:0;margin:0; }Table{margin:100px Auto;Border:1px solid #000;Border-collapse:collapse;/*sets whether the border of a table is merged into a single border*/border-spacing:0;/*set the distance between the borders of adjacent cells*/ }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> <Scripttype= "Text/javascript"src= "Jquery.min.js"></Script></Head><Body></Body></HTML><Scripttype= "Text/javascript">$.ajax ({URL:'ajaxtable.php', type:'Get', datatype:'JSON', Success:function(res) {Console.log (res); //displaying Data on a page varStr= ""; STR+="<table><thead><tr><th> name </th><th> age </th><th> Address </th> </tr></thead><tbody>"; //traversing Data$.each (res,function(index,element) {str+="<tr><td>"+element['name']+"</td><td>"+element[' Age']+"</td><td>"+element['Address']+"</td></tr>";})//after the traversal is completeStr+="</tbody></table>";//Add a table to the body$('Body'). append (str);})</Script>
Examples of PHP code are:
<? PHP Header (' Content-type:text/html;charset=utf-8 '); Echo file_get_contents (' Ajaxtable.json '?>The JSON code example is as follows:
[{ ' name ': ' Baby ', ' age ': ' Address ': ' China Weifang '},{ ' name ': ' Huang Xiaoming ', ' Age ' : ' Address ":" China Yantai "},{ " name ":" Luhan ", " age ": +, " address ":" China Qingdao "}]jquery gets JSON data from Ajax displayed on the page in tabular form
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
