JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="info">
</div>
<!-- Form: the action="javascript:insert()"calls the javascript function "insert" into ajax_framework.js -->
<button id="reg" value="Insert"> dff</button>
<table id="my_table">
<thead>
</thead>
<tbody>
</tbody>
</table>
JavaScript
// Переменная для примера
var res = [{
"0": "1",
"ID": "1",
"1": "2017-10-21 12:39:23",
"Date": "2017-10-21 12:39:23",
"2": "Student1",
"Name": "Student1",
"3": "student1@stud.com",
"Email": "student1@stud.com",
"4": "89123456789",
"Phone": "89123456789",
"5": "\u042d\u0423-119",
"Group": "\u042d\u0423-119",
"6": "\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f",
"Comment": "\u041f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f"
}];
$("#reg").click(function() {
var $table = $('#my_table'),
$table_head = $table.find('thead'),
$table_body = $table.find('tbody');
// Перебираем массив
res.forEach(function(value) {
// Добавляем строку в таблицу
var $table_tr = $table_body.append('<tr></tr>')
for (var key in value) {
if (Number(key) !== parseFloat(key)) {
// Создаём заголовки, которых нет
if (!$table.find('thead td:contains("' + key + '")').length) $table_head.append('<td>' + key + '</td>');
// Добавляем данные в строку
$table_tr.append('<td>' + value[key] + '</td>')
};
};
});
/*$.ajax({
url: 'insert.php', //Файл в который отсылаем данные
type: "POST", // Как передаем POST or GET
success: function(data) {
$('#info').text(data);
var res = JSON.parse(data)
console.log(data);
}
});*/
});