Người Viết : ViKiMi Editor

Dễ dàng Tạo Html TABLE Cơ Bản giúp hiển thị các thông tin một cách khoa trên Website
Mục đích đưa ra một Website tốt cho người dùng, Có rất nhiều cách thể hiện. Nhưng để đem lại cách truyền thống, Có thể bạn cần một thiết kế Table và jQuery cũng có thể hỗ trợ bạn tạo ra thiết kế nhanh chóng. Table sẽ cho phép bạn mang lại nhiều thông tin, tiện ích hơn nữa. jQuery Table là một lựa chọn mà khiến nhiều người hài lòng.
Bạn sẽ thấy công việc này không khó khăn và khá thuận tiệ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 …
jQuery mang lại thiết kế Table rất dễ dàng. Nó cho phép thu thập dữ liệu và xử lý dữ liệu đó để hiển thị dưới dạng Table. Cách tốt nhất là tất cả các xử lý này đều có thể thực hiện tại phía Client, do đó mọi điều bạn cần về sự tối ưu sẽ luôn đạt được.
Nếu bạn sử dụng các Mô hình lập trình thì khả năng bảo mật khá là tốt.
MỘT ĐOẠN XỬ LÝ NGẮN TẠO TABLE :
$(document).ready(function(){ var content = "<table>" for(i=0; i<3; i++){ content += '<tr><td>' + 'result ' + i + '</td></tr>'; } content += "</table>"; $('#table_id').append(content); /* Đã tồn tại Div có id = ‘table_id’ */ });
THIẾT KẾ TABLE CÁCH ĐƠN GIẢN NHẤT :
<!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 table = $('<table>').addClass('company');
var row = $('<tr>');
var th_Cell_1 = $('<th>').html('Hàng 1');
var th_Cell_2 = $('<th>').html('Hàng 2');
var th_Cell_3 = $('<th>').html('Hàng 3');
table.append(row.append(th_Cell_1, th_Cell_2, th_Cell_3));
for(i=0; i<3; i++){
var row = $('<tr>').addClass('employee');
var t_Cell_1 = $('<td>').html('Cell '+i);
var t_Cell_2 = $('<td>').html('Cell '+i);
var t_Cell_3 = $('<td>').html('Cell '+i);
table.append(row.append(t_Cell_1, t_Cell_2, t_Cell_3));
}
$('#table').append(table);
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div id="table"> </div>
</body>
</html>
Hình Ảnh Kết Quả :

Trên đây là cách đơn giản nhất để tạo ra một Table với jQuery. Dữ liệu của bạn có thể dễ dàng hiển thị dưới dạng Table trên một Website. Cách này tương đối linh động và hoàn toàn dễ dàng cho bất kỳ một Website nào. Tuy nhiên, 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.