JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="some_div">
</div>
JavaScript
var json_table = {
"content": {
"title": "Schema",
"cellValues": [
[
"c1",
"count"
],
[
"DoubleType",
"LongType"
]
],
"id": 3,
"name": "Histogram",
"type": "table"
}
};
createTable(json_table);
function createTable(tableData) {
var tableId = tableData.content.id;
var tableName = tableData.content.name;
var tableTitle = tableData.content.title;
var tableRows = tableData.content.cellValues;
// create table
$('body').append('<table border="1" id="' + tableId + '" name="' + tableName + '"></table>');
// create title
$('#'+tableId).append('<caption>' + tableTitle + '</caption>');
// create rows
for (var i = 0; i < tableRows.length; i++) {
createRow(tableId, tableRows[i]);
}
}
function createRow(table_id, rowData) {
var row = $("<tr />")
$("#"+table_id).append(row);
// create cells inside this row
for (var i = 0; i < rowData.length; i++) {
row.append($("<td>" + rowData[i] + "</td>"));
}
}