怎么把json用jquery组合成table

最好是写出经过。。。因为是新人。。不是很懂js和jq。。先谢过了。。
下面是json的源码

var table_1 = {
"table": {
"_width": "600",
"thead": {
"tr": [
{
"th": [
{
"_text": "1"
},
{
"_text": "2"
},
{
"_colspan": "2",
"_text": "34"
},
{
"_text": "5"
},
{
"_text": "6"
}
]
},
{
"th": [
{
"_text": "1"
},
{
"_text": "2"
},
{
"_text": "3"
},
{
"_text": "4"
},
{
"_text": "5"
},
{
"_text": "6"
}
]
}
]
},
"tbody": {
"tr": [
{
"td": [
{
"_text": "td1"
},
{
"_text": "td2"
},
{
"_text": "td3"
},
{
"_text": "td4"
},
{
"_text": "td5"
},
{
"_text": "td6"
}
]
},
{
"td": [
{
"_text": "td21"
},
{
"_text": "td22"
},
{
"_text": "td23"
},
{
"_text": "td24"
},
{
"_text": "td25"
},
{
"_text": "td26"
}
]
}
]
}
}
}

举报该问题

推荐答案推荐于2016-11-21

你好！！

//一个笨方法，从json中取出内容拼成table并追加到body中
$(function(){
    var table_1 = {
              "table": {
                "_width": "600",
                "thead": {
                    .......
            };
    var jsonTbl = table_1.table;                               //获取json中的table
    if(jsonTbl != ""){                                                //如果table不为空
        var $tbl = $("<table/>");                              //创建一个table元素
        $tbl.width(jsonTbl._width).attr("border",1);//设置table1的宽度和边框
        //循环thead中的tr
        $.each(jsonTbl.thead.tr, function(i, _tr){
            var $tr = $("<tr/>");                                 //创建一个tr元素
            //循环tr中的th
            $.each(_tr.th, function(j, _th){
                var $th = $("<th/>");                            //创建一个th元素
                $th.text( _th._text );                                //设置th元素的文本内容
                if(_th._colspan){                                      //如果存在_colspan属性
                    $th.attr("colspan", _th._colspan);         //为th元素添加colspan属性
                }
                $tr.append( $th );                                   //将th元素追加至tr元素上
            });
            $tbl.append( $tr );                                      //将该tr元素追加至table元素上
        });
        //循环tbody中的tr
        $.each(jsonTbl.tbody.tr, function(i, _tr){
            var $tr = $("<tr/>");                                 //创建一个tr元素
            //循环tr中的td
            $.each(_tr.td, function(j, _td){
                var $td = $("<td/>");                           //创建一个td元素
                $td.text( _td._text );                               //设置td元素的文本内容
                $tr.append( $td );                                  //将该td元素追加至tr元素上、
            });
            $tbl.append( $tr );                                     //将tr元素追加至table元素上
        })
        //将表格元素追加至body
        $("body").append( $tbl );
    }

};

//还有种使用模板实现的方式，需要引入一个jquery.tmpl.min.js文件，它是个jQuery模板插件

希望对你有帮助！！！

温馨提示：答案为网友推荐，仅供参考

当前网址：http://44.wendadaohang.com/zd/YWKRDGYRRKWKRGD3DDR.html

其他回答

第1个回答推荐于2018-03-13

方案只有一种，动态生成html。

步骤：

1、获取json串

2、通过json串，动态拼接html语句

3、通过jquery获取table,然后往table中输出html

示例

<body>
<table id='tb'>  //定义一个table
</table>
</body>
<script>
  var json=[{a:'1',b:'2'},{a:'3',b:'4'}];//定义一个json串，也可以通过其他途径获取到json对象。
  var ht = '';
  for(var i=0;i<json.length;i++){//循环json对象，拼接tr,td的html
    ht = ht+'<tr>';
    ht = ht + '<td>' + json[i].a + '</td>';
    ht = ht + '<td>' + json[i].b + '</td>';
    ht = ht+'</tr>';
  }
  $('#tb').html(ht);//通过jquery方式获取table，并把tr,td的html输出到table中
</script>

第2个回答 2013-11-18

你好，你给的json字符串，并不是很标准。用jQuery的$.parseJSON(你的字符串)，转换不了啊。

第3个回答 2015-08-17

先获取JSON数组的长度，然后用for循环给table添加列或者行，然后把json[i]，赋值给table行。

第4个回答 2015-08-08

我是用的easyUi，而且只要穿个值，还特么自带分页

相似回答

怎样将 JSON 数据绑到Table上 用 jQuery答：json) alert ($ ("table").data ("json")); })</script></head><body><table></table></body></html>

jquery 实现动态table多维表格拼装答：类似下面这样<body><table id='tb'></table></body><script> var json=[{a:'1',b:'2'},{a:'3',b:'4'}]; var ht = ''; for(var i=0;i<json.length;i++){ ht = ht+'<tr>'; ht = ht + '<td>' + json[i].a + '</td>'; ht = ht + '<td>...

jquery怎么把读取数据库的数据加载到table中答：1.获取DataSet 2.转成DataTable 3.public static string DataTableToJson(DataTable dt){ StringBuilder jsonBuilder = new StringBuilder();//jsonBuilder.Append("'//jsonBuilder.Append(dt.TableName);jsonBuilder.Append("[");for (int i = 0; i < dt.Rows.Count; i++){ jsonBuilder.Appe...

jquery解析json数组然后自动生成table,下面是我解析的,它带有Object...答：var html="";for (var i = 0; i < testArray.length; i++) { alert(testArray[i].hydatas.INDUSTRY_CODE); //以此类推}//我不知道你的表格想生成什么样的

大家正在搜

json生成htmltable json转datatable cjson怎么判断json结束 jqueryformjson jquery调用json数据 jquery json jquery处理json jquery是json库吗 jquery转化为json