xxoxxoxxoxx

感謝大大，我依xml的方式研究出json的方法了

只是不知道這樣寫好不好

再麻煩大大幫我看一下

以下：
----------------------------------------
test.json

{
"column":["a","b","c"],
"data": [
        {"a": "aaa", "b": "bbb", "c": "ccc" },
        {"a": "aaaa", "b": "bbbb", "c":"cccc" },
        {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
        ]
}

jquery script

        <script type="text/javascript">
        $(function(){  
                $.getJSON("test.json", function(json){
                        
                        //在maintable裡面增加id為title的<tr>
                        $('#maintable').append('<tr id=title></tr>');
                        for(var i=0;i<json.column.length;i++){
                                //抓取json裡column欄位的資料寫入td，並依附id為title的tr
                                $('<td></td>').append(json.column).appendTo('#maintable tr[id=title]');
                        }
                        //依data資料的數量，跑迴圈
                        for(var y=0;y<json.data.length;y++){
                                var name = "mycol";
                                var a = json.data[y].a;
                                var b = json.data[y].b;
                                var c = json.data[y].c;
                                //在maintable再增加一列tr，並名為name_y(以識別每列tr名稱)
                                $('#maintable').append('<tr id=' + name + "_" + y + '></tr>');
                                //抓取json裡data欄位的資料寫入td，並依附id為各name_y的tr
                                $('<td></td>').append(a).appendTo('#maintable tr[id='+ name + "_" + y +']');
                                $('<td></td>').append(b).appendTo('#maintable tr[id='+ name + "_" + y +']');
                                $('<td></td>').append(c).appendTo('#maintable tr[id='+ name + "_" + y +']');
                        }
                });
        });
</script>

body

<table border=0 id="maintable" cellspacing="0" cellpadding="5" ></table>

結果：

a	b	c
aaa	bbb	ccc
aaaa	bbbb	cccc
aaaaa	bbbbb	ccccc

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:09 編輯 ]

wmh

不錯喔，自己寫出來總是比較有成就感而且可以比較踏實學到東西。

不過你用的 append 和 jQuery 的 selector 太頻繁，效能比較不是那麼好，如果先把 html 組起來，一次 append 會比較好，而且字串的組合要用來 array 操作，效能會更好。

$(function(){  
  $.getJSON("test.json", function(json){
    
    var html = [];
    
    //在maintable裡面增加id為title的<tr>
    html.push('<tr id=title>');
    for (var i=0; i<json.column.length; i++) {
      //抓取json裡column欄位的資料寫入td，並依附id為title的tr
      html.push('<td>', json.column, '</td>');
    } 
    html.push('</tr>');
    
    //依data資料的數量，跑迴圈
    for (var y=0; y<json.data.length; y++) {
      var name = "mycol";
      var a = json.data[y].a;
      var b = json.data[y].b;
      var c = json.data[y].c;
      
      //在maintable再增加一列tr，並名為name_y(以識別每列tr名稱)
      html.push('<tr id=', name, "_", y, '>');
      //抓取json裡data欄位的資料寫入td，並依附id為各name_y的tr
      html.push('<td>', a,'</td><td>', b,'</td><td>', c,'</td>');
      html.push('</tr>');
    }
    
    $('#maintable').append(html.join(''));
  });
});

xxoxxoxxoxx

感謝大大回覆，先將字串寫入一個變數再印出
筆數多起來，效能真的好很多耶

感謝大大

另外請問大大，小弟寫的json格資資料這樣合適嗎?

我本來寫一欄為column的資料，想說可以用迴圈來宣告資料

但好像沒辦法，變成a,b,c還是要再單獨宣告一次

所以我寫"column":["a","b","c"],這一欄資料是不是無意義

直接寫這樣就好了?

{
"data": [
        {"a": "aaa", "b": "bbb", "c": "ccc" },
        {"a": "aaaa", "b": "bbbb", "c":"cccc" },
        {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
        ]
}

[ 本帖最後由 xxoxxoxxoxx 於 2009-10-26 11:19 編輯 ]

wmh

欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題：

[
  ["aaa", "bbb", "ccc"], 
  ["aaaa", "bbbb", "cccc"], 
  ["aaaaa", "bbbbb", "ccccc"]
]

xxoxxoxxoxx

原帖由 wmh 於 2009-10-27 09:26 發表
欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題

嗯!!小弟了解了，感謝大大^^