如何使用javascript创建标题中包含日期的html表.....从json中检索日期？

Question

如何使用Javascript创建一个在标题中包含日期的HTML表格，.....从json中检索日期？

下面是从服务中检索的json，“day”的值必须是html表中的列。该表应如下所示：

sccode sheettype 8-3 1-3

gtbb        pt       717      1127   
delh        ut       2090          

[{
    "sccode": "GTBB",
    "sheetType": "PT",
    "sheetCount": 717,
    "scannedSheetCount": 717,
    "day": "8-3"
 }, {
    "sccode": "GTBB",
    "sheetType": "PT",
    "sheetCount": 1127,
    "scannedSheetCount": 1127,
    "day": "1-3"
 }, {
    "sccode": "DELH",
    "sheetType": "UT",
    "sheetCount": 2090,
    "scannedSheetCount": 1171,
    "day": "8-3"
 }

Answer 1

代码:(但没有重复的标记＆＃34;日＆＃34;喜欢＆＃34; 8-3＆＃34;在您的示例中）

＆＃13;

＆＃13;

var json = [{
    "sccode": "GTBB",
    "sheetType": "PT",
    "sheetCount": 717,
    "scannedSheetCount": 717,
    "day": "8-3"
 }, {
    "sccode": "GTBB",
    "sheetType": "PT",
    "sheetCount": 1127,
    "scannedSheetCount": 1127,
    "day": "1-3"
 }, {
    "sccode": "DELH",
    "sheetType": "UT",
    "sheetCount": 2090,
    "scannedSheetCount": 1171,
    "day": "8-3"
 }];
 
 var tableHeader = '<tr>',
     tableRow1 = '<tr>',
     tableRow2 = '<tr>';
 
 for( var i = 0, length = json.length; i < length; i++ ){
 	var value = json[i];
  
 	tableHeader += '<th>' + value.day + '</th>';
    tableRow1 += '<td>' + value.sccode + '</td>';
    tableRow2 += '<td>' + value.sheetType + '</td>';
 }
 
 tableHeader += '</tr>';
 tableRow1 += '</tr>';
 tableRow2 += '</tr>';
 
 var table = '<table>' +
 			tableHeader +
            tableRow1 +
            tableRow2 +
          '</table>';
 
 $("#mytable").html( table );
 
 

＆＃13;

table, th, td {
   border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mytable"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果表结构类似于

[name, age, date1, date2,...,dateN]

保证表格的数据源应该具有相同的模型。

根据您所描述的json，我无法找到name和age字段的来源，因此我将忽略该方面，并向您展示date的转换

您可以在json中拥有更多相同日期的项目，因此您需要解析json和group by date。

＆＃13;

＆＃13;

var columns = [],
  transformedData = [],
  jsonData = [{
    "sccode": "GTBB",
    "sheetType": "PT",
    "sheetCount": 717,
    "scannedSheetCount": 717,
    "day": "8-3"
  }, {
    "sccode": "GTBB",
    "sheetType": "PT",
    "sheetCount": 1127,
    "scannedSheetCount": 1127,
    "day": "1-3"
  }, {
    "sccode": "DELH",
    "sheetType": "UT",
    "sheetCount": 2090,
    "scannedSheetCount": 1171,
    "day": "8-3"
  }];

$.each(jsonData, function(key, item) {
  var keyDate = item.day;

  // check if column does not exist
  if (columns.indexOf(keyDate) === -1) {
    columns.push(keyDate);
  }
});
// here we have all the distinct columns dates existent
// now you need to build up the transformedData
// and that is something only you understand how it will happen

// some loop on j
var row = [],
  i;

for (i = 0; i < columns.length; i++) {
  row.push('something for date ' + columns[i]); // and a function of j
}
transformedData.push(row);
// end of loop of j

// now we have date columns and transformed data
// so we can build the table
var table = $('<table>');


var thead = $('<thead>'),
  theadInnerHtml = [];
var tbody = $('<tbody>'),
  tbodyInnerHtml = [];

// attach head and body to the table and table to the document
thead.appendTo(table);
tbody.appendTo(table);
table.appendTo(document.body);

// the header
theadInnerHtml.push('<tr>');
for (i = 0; i < columns.length; i++) {
  var d = new Date(),
    key = columns[i].split('-'); //day-month

  d.setDate(key[0]);
  d.setMonth(key[1] - 1); // months are 0 index based

  theadInnerHtml.push('<td>');
  theadInnerHtml.push(d.getDate() + '/' + Number(d.getMonth() + 1) + '/' + d.getYear());
  theadInnerHtml.push('</td>');
}
theadInnerHtml.push('</tr>');
thead.html(theadInnerHtml.join(''));


// the body
for (j = 0; j < transformedData.length; j++) {
  var r = [];

  r.push('<tr>');
  for (i = 0; i < columns.length; i++) {
    r.push('<td>');
    r.push(transformedData[j][i]);
    r.push('</td>');
  }
  tbodyInnerHtml.push(r.join(''));
}
tbody.html(tbodyInnerHtml.join(''));

＆＃13;

table {
  border: 1px solid red;
}

thead td {
  border: 1px solid blue;
}

tbody td {
  border: 1px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;