使用Javascript使用JSON创建表_Javascript_Json_Html Table

使用Javascript使用JSON创建表

javascript json

使用Javascript使用JSON创建表,javascript,json,html-table,Javascript,Json,Html Table,我想使用Javascript创建带有JSON的表 1.我创建json API url（）它像这样返回json数据 [{"ID":1,"NAME":"Tester","DEPARTMENT":"Dev","TITLE":"sample title","CONTENTS":"sample content","TYPE":0,"IMPORTANCE":"0","CREATED_AT":"2017-04-26 14:55:39","UPDATED_AT":"2017-04-27 00:00:00"},

我想使用Javascript创建带有JSON的表

1.我创建json API url（）它像这样返回json数据

[{"ID":1,"NAME":"Tester","DEPARTMENT":"Dev","TITLE":"sample title","CONTENTS":"sample content","TYPE":0,"IMPORTANCE":"0","CREATED_AT":"2017-04-26 14:55:39","UPDATED_AT":"2017-04-27 00:00:00"},{"ID":4,"NAME":"","DEPARTMENT":"","TITLE":"smaple title2","CONTENTS":"sample content2","TYPE":null,"CREATED_AT":"2017-05-01 11:44:44","UPDATED_AT":"0000-00-00 00:00:00"}]

2.我想用json数据制作一个表，所以。。

我想使用标题单元格，但我不能。。我怎样才能得到这张桌子

--------------------------------------
ID  | Title        | Content
--------------------------------------
1   | sample title | sample content
--------------------------------------
2   | sample title2| sample content2
----------------------------------------

var makeTh=$（“”）。appendTo（makeTable）；
$.each（选项、函数（索引、行）{
var makeTd=$（“”）。追加（makeTh）；
css（{width，row['width']}）.html（row['field']）；
});

尝试在第一个

$上添加代码。每个
var makeTh=$（“”）。appendTo（makeTable）；
$.each（选项、函数（索引、行）{
var makeTd=$（“”）。追加（makeTh）；
css（{width，row['width']}）.html（row['field']）；
});

尝试在第一个$上添加代码。在循环开始之前，每个
都必须添加标题行
 var apiURL = '/getAllItems'; 
    var data= [];  
    var option = [
        {field:"ID",width:10},
        {field:"TITLE", width:160},
        {field:"CONTENTS", width:420}
    ];

    $.getJSON(apiURL, function ( datas ) {
        $.each( datas, function( key, val ){
            data.push( val );
        });
    });

    window.onload = function() {
        var itemTable = $("#itemTable"); 
        var makeTable = $("<table>").appendTo(itemTable); 
        var head='<tr><th>ID</th><th>TITLE</th><th>CONTENT</th></tr>';
        makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"});
          $(head).appendTo(makeTable);
        $.each( data, function( index, row) {
            var makeTr = $("<tr>").appendTo(makeTable);
            console.log("index : "+index);
            console.log("row : "+ row);

            $.each( option, function( i, fieldInfo ) {
                var makeTd = $("<td>").appendTo(makeTr);
                console.log("Index : "+index);
                console.log("Row : "+row);
                console.log( "i : "+i);
                console.log( "fieldInfo : "+fieldInfo);
                console.log( "fieldInfo.field : "+fieldInfo.field);
                console.log( "Row[Field] : "+row[fieldInfo.field]);

                makeTd.html( row[fieldInfo.field]);
                makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"});
            });
        });
    }

</script>

var-apiURL='/getAllItems'；
var数据=[]；
var选项=[
{字段：“ID”，宽度：10}，
{字段：“标题”，宽度：160}，
{字段：“内容”，宽度：420}
];
$.getJSON（apiURL，函数（数据）{
$。每个（数据、函数（键、值）{
数据推送（val）；
});
});
window.onload=函数（）{
var itemTable=$（“#itemTable”）；
var makeTable=$（“”）。appendTo（itemTable）；
var head='IDTITLECONTENT'；
css（{“border collapse”：“collapse”，“border”：“1px#CCC solid”}）；
$（head）.appendTo（makeTable）；
$.each（数据、函数（索引、行）{
var makeTr=$（“”）。appendTo（makeTable）；
控制台日志（“索引：”+索引）；
console.log（“行：”+行）；
$。每个（选项、功能（i、字段信息）{
var makeTd=$（“”）。appendTo（makeTr）；
控制台日志（“索引：”+索引）；
console.log（“行：”+行）；
控制台日志（“i:+i”）；
console.log（“fieldInfo:+fieldInfo”）；
控制台日志（“fieldInfo.field:+fieldInfo.field”）；
log（“行[Field]：”+行[fieldInfo.Field]）；
html（行[fieldInfo.field]）；
css（{“width”：fieldInfo.width+“px”，“border:“1px#CCC solid”}）；
});
});
}
在循环开始之前，必须为标题添加行
 var apiURL = '/getAllItems'; 
    var data= [];  
    var option = [
        {field:"ID",width:10},
        {field:"TITLE", width:160},
        {field:"CONTENTS", width:420}
    ];

    $.getJSON(apiURL, function ( datas ) {
        $.each( datas, function( key, val ){
            data.push( val );
        });
    });

    window.onload = function() {
        var itemTable = $("#itemTable"); 
        var makeTable = $("<table>").appendTo(itemTable); 
        var head='<tr><th>ID</th><th>TITLE</th><th>CONTENT</th></tr>';
        makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"});
          $(head).appendTo(makeTable);
        $.each( data, function( index, row) {
            var makeTr = $("<tr>").appendTo(makeTable);
            console.log("index : "+index);
            console.log("row : "+ row);

            $.each( option, function( i, fieldInfo ) {
                var makeTd = $("<td>").appendTo(makeTr);
                console.log("Index : "+index);
                console.log("Row : "+row);
                console.log( "i : "+i);
                console.log( "fieldInfo : "+fieldInfo);
                console.log( "fieldInfo.field : "+fieldInfo.field);
                console.log( "Row[Field] : "+row[fieldInfo.field]);

                makeTd.html( row[fieldInfo.field]);
                makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"});
            });
        });
    }

</script>

var-apiURL='/getAllItems'；
var数据=[]；
var选项=[
{字段：“ID”，宽度：10}，
{字段：“标题”，宽度：160}，
{字段：“内容”，宽度：420}
];
$.getJSON（apiURL，函数（数据）{
$。每个（数据、函数（键、值）{
数据推送（val）；
});
});
window.onload=函数（）{
var itemTable=$（“#itemTable”）；
var makeTable=$（“”）。appendTo（itemTable）；
var head='IDTITLECONTENT'；
css（{“border collapse”：“collapse”，“border”：“1px#CCC solid”}）；
$（head）.appendTo（makeTable）；
$.each（数据、函数（索引、行）{
var makeTr=$（“”）。appendTo（makeTable）；
控制台日志（“索引：”+索引）；
console.log（“行：”+行）；
$。每个（选项、功能（i、字段信息）{
var makeTd=$（“”）。appendTo（makeTr）；
控制台日志（“索引：”+索引）；
console.log（“行：”+行）；
控制台日志（“i:+i”）；
console.log（“fieldInfo:+fieldInfo”）；
控制台日志（“fieldInfo.field:+fieldInfo.field”）；
log（“行[Field]：”+行[fieldInfo.Field]）；
html（行[fieldInfo.field]）；
css（{“width”：fieldInfo.width+“px”，“border:“1px#CCC solid”}）；
});
});
}
以下是一些您可以尝试的东西。。希望解释有意义。如果您无法获得任何信息，请继续评论…：D

var-apiURL='/getAllItems'；
var数据=[]；
var选项=[
{字段：“ID”，宽度：10}，
{字段：“标题”，宽度：160}，
{字段：“内容”，宽度：420}
];
//为测试注释了您的Ajax。
/*$.getJSON（apiURL，函数（数据）{
$。每个（数据、函数（键、值）{
数据推送（val）；
});
});
*/
//获取数据变量集
数据=[{“ID”：1，“名称”：“测试人员”，“部门”：“开发”，“标题”：“样本标题”，“内容”：“样本内容”，“类型”：0，“重要性”：“0”，“创建时间”：“2017-04-26 14:55:39”，“更新时间”：“2017-04-27 00:00:00”}，{“ID”：2，“名称”：“部门”：“标题”：“样本标题2”，“内容”：“样本内容2”，“类型”：null，“创建时间”：“2017-05-01 11:44:44”，“更新时间”："0000-00-00 00:00:00"}];
//开始在加载时创建表。
window.onload=函数（）{
//创建表元素。
var makeTable=$（“”）；
//将表追加到现有div中，在这里它有类“test”。
$（“.test”）.append（$（makeTable））；
//附加标题的第一行。
$（makeTable）.append（$（“”）；
//在循环中附加所有标题。
$。每个（选项、功能（i、dt）{
//只需找到第一个tr并向其添加td内容。
$（makeTable.find（“tr”）.append（“+dt[“field”]+”）；
});
//开始附加数据。
$。每个（数据、函数（i、行）{
//在表中找到tbody并将tr添加到其中。
var nrow=$（makeTable）.find（'tbody'）.append（“”）；
//对于每个选项，在数据中查找其值并附加到上面新创建的tr。
$。每个（选项、功能（j、dt）{
//这就是你想要的。。
$（nrow）.append（“+行[dt[”字段]]+”）；
});
});
}
//完成。
表格，td
{
边框：1px#CCC实心；
}
这里有一些你可以尝试的东西..希望解释有意义..如果你得不到任何东西，请继续评论..:D

var-apiURL='/getAllItems'；
var数据=[]；
var选项=[
{字段：“ID”，宽度：10}，
{字段：“标题”，宽度：160}，
{字段：
var makeTh = $("<th>").appendTo(makeTable);
$.each(option, function (index, row) {
    var makeTd = $("<td>").append(makeTh);
    makeTd.css({width, row['width']}).html(row['field']);
});

 var apiURL = '/getAllItems'; 
    var data= [];  
    var option = [
        {field:"ID",width:10},
        {field:"TITLE", width:160},
        {field:"CONTENTS", width:420}
    ];

    $.getJSON(apiURL, function ( datas ) {
        $.each( datas, function( key, val ){
            data.push( val );
        });
    });

    window.onload = function() {
        var itemTable = $("#itemTable"); 
        var makeTable = $("<table>").appendTo(itemTable); 
        var head='<tr><th>ID</th><th>TITLE</th><th>CONTENT</th></tr>';
        makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"});
          $(head).appendTo(makeTable);
        $.each( data, function( index, row) {
            var makeTr = $("<tr>").appendTo(makeTable);
            console.log("index : "+index);
            console.log("row : "+ row);

            $.each( option, function( i, fieldInfo ) {
                var makeTd = $("<td>").appendTo(makeTr);
                console.log("Index : "+index);
                console.log("Row : "+row);
                console.log( "i : "+i);
                console.log( "fieldInfo : "+fieldInfo);
                console.log( "fieldInfo.field : "+fieldInfo.field);
                console.log( "Row[Field] : "+row[fieldInfo.field]);

                makeTd.html( row[fieldInfo.field]);
                makeTd.css({"width": fieldInfo.width+"px", "border": "1px #CCC solid"});
            });
        });
    }

</script>