2016-07-07 76 views
-5

如何使用JQuery從這些對象創建動態表無法從JSON創建動態表

對象是數組類型並存儲每列數據。

我想表是這樣的:

+--Start_Hour--Start_Minutes--Start_Month--+ | 11 | 00 | 07 --| | 03 | 03 | 03 --|

enter image description here

是的,但其糟糕的代碼:(

function GenerateHolidayTable(data) { 
    var name, number; 
    var HolidayTableHTML = ''; 
    HolidayTableHTML += '<table class="table"><tr><th>Start_Month</th><th>Start_Day</th><th>Start_Hour</th><th>Start_Min</th><th>End_Month</th><th>End_Day</th><th>End_Hour</th><th>End_Min</th> <th>Description</th></tr>'; 
    $.each(data, function(key, value) { 
    if (key == "Start_Month") { 
     HolidayTableHTML += '<tr>'; 
     $.each(value, function(key, value) { 
     HolidayTableHTML += '<td>' + value + ' </td>'; 
     }); 
    } 
    .................................. 
    else if (key == "Description") { 
     $.each(value, function(key, value) { 
     HolidayTableHTML += '<td>' + value + ' </td>'; 
     }); 
     HolidayTableHTML += '</tr>'; 
    } 
    }); 
    HolidayTableHTML += '</table>'; 
    $('#HolidayTable').append(HolidayTableHTML); 
} 
+2

有你嘗試代碼的東西? – Gintoki

+0

這不僅僅是錯誤的代碼。如果我想'$('#HolidayTable')'是'

',那麼你只需在其中添加另一個表。 –

+0

它的div元素 – user3093010

回答

2

你可以做這樣的事情:

假設所有三個(START_MONTH,START_HOUR & Start_Minutes)將具有相同的長度。

var json = "{\"Start_Month\": {\"1\" :\"1\",\"2\" :\"2\",\"3\" :\"3\"},\"Start_Minutes\": {\"1\" :\"10\",\"2\" :\"20\",\"3\" :\"30\"},\"Start_Hour\": {\"1\" :\"01\",\"2\" :\"02\",\"3\" :\"03\"}}"; 
 
var jsonObj = JSON.parse(json); 
 
$.each(jsonObj.Start_Hour, function(idx, val) { 
 
    var row = "<tr>"; 
 
    row += "<td>" + val + "</td>"; 
 
    row += "<td>" + jsonObj.Start_Minutes[idx] + "</td>"; 
 
    row += "<td>" + jsonObj.Start_Month[idx] + "</td>"; 
 
    row += "</tr>"; 
 
    $("#data").append(row); 
 
});
table { 
 
    width: 100%; 
 
} 
 
table, 
 
td, 
 
th { 
 
    border: 2px lightblue solid; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Start_Hour</th> 
 
     <th>Start_Minutes</th> 
 
     <th>Start_Month</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="data"></tbody> 
 
</table>

+0

嗯有道理。我錯過了'Start_Hour'等json結構是個別數組。+ 1 – anu

+0

即使它們是數組,它也會工作:https://jsfiddle.net/wgsd3kko/ –

-2

你看着一個JavaScript模板系統,如Mustache JS

因爲它會讓事情變得相對容易。