Người Viết : ViKiMi Editor

Hiệu quả Cao hơn khi Tạo HTML Table sử dụng JSON. Một cách làm việc tốt hơn nữa !
Bạn có thể tạo Html Table đơn giản nhất theo một cách thông thường. Nhưng liệu điều đó có mang lại kết quả cao như mong muốn? Chắc hẳn là không được như bạn mong muốn. Bạn cần một cách tạo dữ liệu nâng cao hơn. Dữ liệu này cho phép bạn làm việc trên nhiều môi trường. Và nó là cách bạn có thể trao đổi dữ liệu giữa nhiều ngôn ngữ.
Câu trả lời dành cho câu hỏi này :
“Làm sao có thể có một HTML Table phù hợp với nhiều cách trao đổi dữ liệu?”
+ Bạn cần tạo một HTML Table với JSON.
Đây là một trong nhiều cách có thể thao hiệu quả mà không lo lắng quá nhiều.
Đặc biệt là vấn đề an toàn dữ liệu của bạn.
Table sẽ mang lại các hữu ích :
+ Hiển thị khoa học các thông tin
+ Hiển thị thông tin có bố cục rõ ràng
+ Các thông tin được chia thành hàng và cột
+ Table cho phép có các tác vụ được trình bày phù hợp
+ Table có thể Responsive trên nhiều màn hình thiết bị
+ Etc …
Thiết kế mọi thứ với JSON, chắc hẳn là một điều tuyệt vời và được áp dụng rất nhiều trong các công việc. Sự kết hợp giữa nhiều công việc khác nhau là điều mong muốn. Tạo HTML Table với JSON là một lựa chọn tốt.
Nếu bạn sử dụng các Mô hình lập trình thì khả năng bảo mật của Nó khá là tốt.

MỘT ĐOẠN XỬ LÝ NGẮN TẠO TABLE :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
table{
width:500px;
text-align:left;
border : 1px solid black;
}
table, th, td{
padding : 1%;
}
</style>
<script>
$(document).ready(function(){
var arr = ['Ten', 'Ho', 'Birthday', 'Actions'];
var t_data = {
'id': 'table_id',
'header':[{'Ten': 'Tên', 'Ho' : 'Họ Đệm', 'Birthday' : 'Ngày Sinh', 'Actions':'Actions'}],
'data': [{'Ten': 'Tuấn', 'Ho' :'Tân Ngọc', 'Birthday' :'10-10-2010', 'Actions':'Edit / Delete'},
{'Ten': 'Kiện', 'Ho' :'Nguyên Ngọc', 'Birthday' :'10-10-2005', 'Actions':'Edit / Delete'},
{'Ten': 'Nam', 'Ho' :'Nguyễn Ngọc', 'Birthday' :'10-10-2005', 'Actions':'Edit / Delete'},
{'Ten': 'Trịnh', 'Ho' :'Lương Ngọc', 'Birthday' :'10-10-2005', 'Actions':'Edit / Delete'},
]};
var resultstring='<table>';
resultstring+='<tr>';
for(var j=0; j < arr.length; j++){
//array arr contains the field names in this case
resultstring+= '<th>'+ arr[j] + '</th>';
}
resultstring+='</tr>';
$.each(t_data.data, function(i, result) {
resultstring+='<tr>';
for(var j=0; j<arr.length; j++){
resultstring+='<td>'+ result[arr[j]]+ '</td>';
}
resultstring+='</tr>';
});
resultstring+='</table>';
$('#table_id').html(resultstring);
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div id="table_id"> </div>
</body>
</html>
Hình Ảnh Kết Quả :

THIẾT KẾ TABLE VỚI DỮ LIỆU JSON:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
table{
width:500px;
text-align:left;
border : 1px solid black;
background : lavender;
}
table, th, td{
padding : 1%;
margin : 1% 0%;
}
</style>
<script>
function create_table(tableobj){
/**
* Data is a JSON object
*/
$('#' + tableobj.id).html( '' );
$.each([tableobj.header, tableobj.data], function(_index, _obj){
$.each(_obj, function(index, row){
var line = '';
$.each(row, function(key, value){
if(0 === _index){
line += '<th>' + value + '</th>';
}else{
line += '<td>' + value + '</td>';
}
});
line = '<tr>' + line + '</tr>';
$('#' + tableobj.id).append(line);
});
});
}
$(document).ready(function(){
var t_data = {
'id': 'table_id',
'header':[{'Ten': 'Tên', 'Ho' : 'Họ Đệm', 'Birthday' : 'Ngày Sinh', 'Actions':'Actions'}],
'data': [{'Ten': 'Tuấn', 'Ho' :'Tân Ngọc', 'Birthday' :'10-10-2010', 'Actions':'Edit / Delete'},
{'Ten': 'Kiện', 'Ho' :'Nguyên Ngọc', 'Birthday' :'10-10-2005', 'Actions':'Edit / Delete'},
{'Ten': 'Nam', 'Ho' :'Nguyễn Ngọc', 'Birthday' :'10-10-2005', 'Actions':'Edit / Delete'},
{'Ten': 'Trịnh', 'Ho' :'Lương Ngọc', 'Birthday' :'10-10-2005', 'Actions':'Edit / Delete'},
]};
create_table(t_data);
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div> Đây Là Bảng Dữ Liệu
<table id="table_id">
</table>
</div>
</body>
</html>
Hình Ảnh Kết Quả :

Cách tốt nhất vẫn là sử dụng JSON (JavaScript Object Notation) và Ajax để có thể tạo một Table ưng ý. Đem lại Website kết nối dữ liệu tốt nhất tới Database. Một công việc đem lại nhiều hiệu quả mong muốn. Có thể nói một công đôi việc khi làm cách này.
+ Đây là một cách hay được áp dụng nhưng cũng không thể bỏ qua.
+ Hữu ích của nó rất cao cho Lập Trình.