1. 程式人生 > >JQuery操作Json迴圈插入到Table

JQuery操作Json迴圈插入到Table

1建立Json物件:

 var data = " [ {name:'6101',value:'北京市',age:'11'}, {name:'6102',value:'天津市',age:'11'}, {name:'6103',value:'上海市',age:'22'}]";    //建立Json字串

   var dataObj = eval("(" + data + ")");       //轉換為json物件 

2,table:

        <table id="mytab" border="1">

            <tr>

                <th>代號</th>

                <th>城市</th>

                <th>附加數字</th>

            </tr>

        </table>

------------------------------我的想法-------------------------------

外面for迴圈用來遍歷JSON有多少個“子物件”,並給table新增tr,

內部each遍歷每個‘子物件的屬性’,寫入tr裡面!

-----------------------------我的想法結束----------------------------

3,迴圈插入的JQ程式碼:

                 var $tab1 = $("#mytab");

            for (i = 0; i < dataObj.length; i++) {

                $tab1.append("<tr>");

                           $.each(dataObj[i], function (j, val) {   

                              $("#mytab").append("<td>"+val+"</td>");

                            });

                      $tab1.append("</tr>");

                 }

如何後的結果為: