2016-07-07 3 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

Хм имеет смысл. Я пропустил структуру json, что 'Start_Hour' и т. Д. Являются отдельными массивами. + 1 – anu

+0

Он будет работать, даже если они массивы: https://jsfiddle.net/wgsd3kko/ –

-2

Вы смотрели в яваскрипте системы шаблонной, такие как Mustache JS ?

Так как это сделало бы что-то вроде этого относительно легко сделать.

Смежные вопросы