我想使用Javascript创建带有JSON的表。
它返回这样的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"}]
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);
makeTable.css({"border-collapse": "collapse", "border": "1px #CCC solid"});
$.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>
和
它返回
--------------------------------------
1 | sample title | sample content
--------------------------------------
2 | sample title2| sample content2
----------------------------------------
我想要使用标题单元格,但我不能......我怎么能像这张桌子一样?
--------------------------------------
ID | Title | Content
--------------------------------------
1 | sample title | sample content
--------------------------------------
2 | sample title2| sample content2
----------------------------------------
答案 0 :(得分:0)
var makeTh = $("<th>").appendTo(makeTable);
$.each(option, function (index, row) {
var makeTd = $("<td>").append(makeTh);
makeTd.css({width, row['width']}).html(row['field']);
});
尝试在第一个$.each
上添加代码。
答案 1 :(得分:0)
您必须在循环开始之前添加标题行
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>
答案 2 :(得分:-1)
这是你可以尝试的东西..希望解释有意义......如果你不会得到任何东西请继续评论......:D
var apiURL = '/getAllItems';
var data= [];
var option = [
{field:"ID",width:10},
{field:"TITLE", width:160},
{field:"CONTENTS", width:420}
];
//commented your Ajax for testing.
/*$.getJSON(apiURL, function ( datas ) {
$.each( datas, function( key, val ){
data.push( val );
});
});
*/
//get the data varable set
data = [{"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":2,"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"}];
//begin creating table on load.
window.onload = function() {
//create table element.
var makeTable = $("<table>");
//append table to existing div here it have class "test".
$(".test").append($(makeTable));
//append first row for headings.
$(makeTable).append($("<tr>"));
//append all heading in loop.
$.each(option,function(i,dt){
//simply find first tr and append td with content to it.
$(makeTable).find("tr").append("<td>"+dt["field"]+"</td>");
});
// start appending data.
$.each(data,function(i,row){
//find tbody in table and add tr to it.
var nrow = $(makeTable).find('tbody').append("<tr>");
//for each options find its value in data and append to newly created tr above.
$.each(option,function(j,dt){
// this is actually what you want..
$(nrow).append("<td>"+row[dt["field"]]+"</td>");
});
});
}
//done.
&#13;
table,td
{
border: 1px #CCC solid;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="test">
</div>
&#13;