❮ Đối tượng bảng Ví dụTìm xem có bao nhiêu hàng trong một bảng var x = tài liệu. getElementById("myTable"). hàng. chiều dài; Kết quả của x sẽ là Tự mình thử »Thêm các ví dụ "Tự mình thử" bên dưới
Định nghĩa và cách sử dụngBộ sưu tập các hàng trả về một bộ sưu tập tất cả các phần tử trong một bảng Ghi chú. Các thành phần trong bộ sưu tập được sắp xếp như chúng xuất hiện trong mã nguồn Mẹo. Sử dụng phương thức insertRow() để tạo một hàng mới () Mẹo. Sử dụng phương thức deleteRow() để xóa một hàng Mẹo. Sử dụng phương thức insertCell() để tạo một ô mới() Mẹo. Sử dụng phương thức deleteCell() để xóa một ô Mẹo. Sử dụng tập hợp ô để trả về tập hợp tất cả hoặc thành phần trong bảng
Hỗ trợ trình duyệtBộ sưu tậphàngCóCóCóCóCó
cú phápTính chấtcác yếu tố trong bộ sưu tậpGhi chú. Thuộc tính này là chỉ đọc Thuộc tínhDescriptionlengthTrả về sốphương phápphần tử từ bộ sưu tập với chỉ mục được chỉ định (bắt đầu từ 0)Ghi chú. Trả về null nếu số chỉ mục nằm ngoài phạm vi phần tử từ bộ sưu tập với chỉ mục được chỉ định (bắt đầu từ 0)Ghi chú. Trả về null nếu số chỉ mục nằm ngoài phạm vi phần tử từ bộ sưu tập với id được chỉ địnhGhi chú. Trả về null nếu id không tồn tại MethodDescription[index]Trả về mục(chỉ mục)Trả về tên mục(id)Trả về
chi tiết kỹ thuậtcác phần tử trong Phiên bản DOM. Giá trị trả về đối tượng tài liệu cấp 2 cốt lõi. Đối tượng HTMLCollection, đại diện cho phần tử. Các thành phần trong bộ sưu tập được sắp xếp như chúng xuất hiện trong mã nguồn
Thêm ví dụVí dụ[mục lục] Cảnh báo InternalHTML của phần tử đầu tiên (chỉ số 0) trong bảng cảnh báo (tài liệu. getElementById("myTable"). hàng[0]. bên trongHTML; Tự mình thử »
Ví dụmục (chỉ mục) Cảnh báo InternalHTML của phần tử đầu tiên (chỉ số 0) trong bảng cảnh báo (tài liệu. getElementById("myTable"). hàng. mục(0). InternalHTML); Tự mình thử »
Ví dụtênItem(id) Cảnh báo InternalHTML của phần tử có id="myRow" trong bảng cảnh báo (tài liệu. getElementById("myTable"). hàng. tênItem("myRow"). InternalHTML); Tự mình thử »
Ví dụThay đổi nội dung ô đầu tiên của bảng var x = tài liệu. getElementById("myTable"). hàng[0]. ô;
x[0]. innerHTML = "NỘI DUNG MỚI"; Tự mình thử »
Trang liên quantài liệu tham khảo HTML. thẻ HTML Tham chiếu JavaScript. HTML DOM Đối tượng TableRow
❮ Đối tượng bảng
Các bảng HTML rất dễ sử dụng để hiển thị một lượng nhỏ dữ liệu. Nhưng người dùng có thể khó làm việc với chúng khi chúng hiển thị nhiều dữ liệu Các tính năng như sắp xếp, lọc và phân trang giúp làm việc với nhiều hàng dữ liệu dễ dàng hơn. Chúng tôi có thể dễ dàng triển khai các tính năng đó bằng cách di chuyển từ Bảng HTML sang thành phần Lưới dữ liệu JavaScript Trong bài đăng này, chúng tôi sẽ sử dụng phiên bản cộng đồng miễn phí của Lưới dữ liệu JavaScript AG Grid để chuyển đổi từ một bảng HTML tĩnh dài sang một Lưới dữ liệu tương tác dễ sử dụng. Lượng JavaScript chúng ta cần để làm điều này là tối thiểu và rất đơn giản Chúng tôi sẽ xây dựng mã ví dụ trong ba bước - Hiển thị danh sách tĩnh dữ liệu Mục Todo trong Bảng HTML
- Tải danh sách các mục Todo từ API REST và hiển thị trong bảng
- Chuyển đổi Bảng HTML thành Lưới dữ liệu để cho phép sắp xếp, lọc và phân trang
Cách kết xuất dữ liệu bằng bảng HTMLPhiên bản đầu tiên của ứng dụng của chúng tôi sẽ cho phép chúng tôi tạo cấu trúc trang cơ bản và đảm bảo rằng chúng tôi đang hiển thị đúng dữ liệu cho người dùng Mình tạo 1 file <script type="text/javascript" charset="utf-8">
</script>
</body>
3 đơn giản như hình bên dưới<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
Điều này sẽ hiển thị một Mục Todo duy nhất trong một bảng Mục Todo duy nhất được hiển thị trong bảng HTMLDưới đây là ví dụ Trang bảng HTML tĩnh <script type="text/javascript" charset="utf-8">
</script>
</body>
4 được tạo kiểu để có chiều rộng 100% của trang bằng cách sử dụng <script type="text/javascript" charset="utf-8">
</script>
</body>
5 và các đường viền giữa các ô trong bảng đã được tạo kiểu để hiển thị dưới dạng một dòng với <script type="text/javascript" charset="utf-8">
</script>
</body>
6Nếu không có giá trị <script type="text/javascript" charset="utf-8">
</script>
</body>
7, bảng sẽ giống như hình bên dướiBảng được tạo kiểu mà không thu gọn đường viềnLợi ích của các bảng HTML ngắnBảng HTML là một cách rất nhanh để hiển thị một lượng nhỏ dữ liệu ở dạng bảng trên một trang Các bảng yêu cầu kiểu dáng vì kiểu dáng mặc định của <script type="text/javascript" charset="utf-8">
</script>
</body>
4 khác nhau giữa các trình duyệt và thường được hiển thị không có đường viền khiến dữ liệu khó đọcHiện tại, danh sách Todo Items của chúng tôi được mã hóa tĩnh vào trang. Đối với bước tiếp theo, chúng tôi sẽ <script type="text/javascript" charset="utf-8">
</script>
</body>
9 danh sách từ API REST bằng JavaScriptCách đọc JSON từ API để kết xuất trong bảng HTMLVì chúng tôi sẽ tải dữ liệu từ API, tôi sẽ không mã hóa bất kỳ dữ liệu nào trong bảng. Để hỗ trợ tải động, tôi chỉ cần xóa dòng dữ liệu khỏi <script type="text/javascript" charset="utf-8">
</script>
</body>
4 vì tôi sẽ tạo các hàng dữ liệu bằng JavaScript <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
Tôi sẽ thêm JavaScript vào trang <script type="text/javascript" charset="utf-8">
</script>
</body>
3 ngay trước thẻ <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
12 kết thúc <script type="text/javascript" charset="utf-8">
</script>
</body>
Để bắt đầu, tôi sẽ viết mã đọc dữ liệu Tôi sẽ sử dụng ứng dụng API REST "{JSON} Placeholder" cho phần trình diễn này. Bằng cách thực hiện yêu cầu <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
13 trên URL https. //jsonplaceholder. đánh máy. com/todos, chúng tôi sẽ nhận được phản hồi JSON là danh sách các mục TodoBạn có thể tự mình dùng thử mà không cần JavaScript bằng cách nhấp vào liên kết ở trên Cách dễ nhất để thực hiện yêu cầu <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
13 trên API là sử dụng hàm <script type="text/javascript" charset="utf-8">
</script>
</body>
9 được tích hợp trong JavaScript<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
1Để giải thích đoạn mã trên, tôi sẽ mô tả nó trong các phần bên dưới - Đưa ra yêu cầu GET tới
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
16
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
8- Sau đó, khi yêu cầu kết thúc, hãy chuyển đổi phản hồi thành Đối tượng JavaScript – trong trường hợp của chúng tôi, đây sẽ là một mảng chứa tất cả các Mục công việc
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
9- Sau đó viết đối tượng JavaScript vào bàn điều khiển
<script type="text/javascript" charset="utf-8">
</script>
</body>
0Với mã này trong ứng dụng của chúng tôi, chúng tôi sẽ không thấy bất kỳ thứ gì trong bảng, nhưng chúng tôi sẽ thấy mảng được hiển thị trong Bảng điều khiển công cụ dành cho nhà phát triển trình duyệt nơi chúng tôi có thể xem dữ liệu Dữ liệu hiển thị khi giao diện điều khiển. nhật ký đã sử dụngLệnh gọi API trả về 200 mục và mỗi mục là một Đối tượng Todo <script type="text/javascript" charset="utf-8">
</script>
</body>
1Bước tiếp theo của chúng tôi là hiển thị dữ liệu trong bảng <script type="text/javascript" charset="utf-8">
</script>
</body>
2Hàm <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
17 tìm bảng trong DOM để chúng ta có thể nối các hàng mới vào bảng, sau đó lặp lại tất cả các Mục công việc được trả về từ lệnh gọi APIĐối với mỗi Mục việc cần làm, mã sẽ tạo một phần tử <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
18 mới, sau đó thêm từng giá trị trong Mục việc cần làm vào bảng dưới dạng phần tử <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
19 <script type="text/javascript" charset="utf-8">
</script>
</body>
6Khi mã <script type="text/javascript" charset="utf-8">
</script>
</body>
9 và <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
17 được thêm vào ứng dụng của chúng tôi và tải trang, chúng tôi sẽ thấy rằng bảng HTML hiện có tất cả 200 Mục Công việc được hiển thị trong bảngDanh sách việc cần làm được tải độngDưới đây là ví dụ Trang bảng HTML động Lợi ích và Nhược điểm của Bảng HTML dàiBảng HTML là một cách dễ dàng để hiển thị dữ liệu trên một trang nhưng không khả dụng lắm đối với các danh sách dữ liệu dài Các mục dữ liệu có thể khó tìm, mặc dù người dùng có thể tìm kiếm dữ liệu bằng cách sử dụng chức năng 'tìm trong trang' tích hợp sẵn của trình duyệt Bằng cách hiển thị trong bảng HTML, người dùng của chúng tôi không có cách nào để sắp xếp dữ liệu hoặc lọc nó để chỉ hiển thị các Mục công việc đã hoàn thành. Chúng tôi sẽ phải thêm mã bổ sung vào ứng dụng của mình để triển khai chức năng sắp xếp và lọc Bảng HTML sẽ tự động phát triển khi có nhiều hàng hơn được thêm vào bảng. Điều này có thể khiến chúng khó sử dụng hơn trong một ứng dụng khi nhiều dữ liệu đã được thêm vào Khi chúng tôi thêm nhiều dữ liệu, chúng tôi có thể muốn phân trang để hạn chế bảng dữ liệu chỉ hiển thị một số hàng nhất định và cho phép người dùng nhấp qua trang tiếp theo để xem thêm các mục. Một lần nữa, đây là chức năng mà chúng ta sẽ phải viết thêm mã để xử lý Khi ứng dụng của chúng ta cần nhiều tương tác với người dùng hơn, chúng ta nên cân nhắc sử dụng thành phần Lưới dữ liệu Chúng ta có thể sử dụng nó để thêm chức năng bổ sung như - phân loại
- lọc
- thay đổi kích thước cột
- phân trang
Thư viện và thành phần lưới dữ liệuCó sẵn nhiều Thành phần lưới dữ liệu miễn phí, nhưng hầu hết chúng đều dành riêng cho khung nên chúng yêu cầu viết mã bằng React, Angular hoặc Vue Tôi đang sử dụng AG Grid cho ví dụ này vì phiên bản miễn phí có thể được sử dụng với JavaScript, TypeScript, React, Angular hoặc Vue. "AG" là viết tắt của Agnostic, có nghĩa là có thể được sử dụng với bất kỳ khung nào Khi bạn học cách sử dụng Lưới AG trong một khung, cùng một API sẽ có sẵn cho các khung khác, giúp kiến thức của bạn có thể chuyển giao cho các dự án khác Phiên bản miễn phí của AG Grid có thể được sử dụng trong các ứng dụng thương mại, vì vậy nếu bạn quản lý để mở rộng ứng dụng demo được hiển thị ở đây thành Ứng dụng quản lý danh sách Todo thương mại, bạn vẫn có thể sử dụng AG Grid miễn phí. Nhiều ứng dụng thương mại đã được xây dựng bằng phiên bản miễn phí của AG Grid Ngoài ra, Lưới AG thường được tìm kiếm như một kỹ năng trong các đơn xin việc, do đó, đáng để thử nghiệm với Phiên bản thương mại của AG Grid có các tính năng bổ sung như Xuất Excel và tạo Biểu đồ, nhưng chúng tôi không cần bất kỳ chức năng nào trong bản demo này Sử dụng Lưới dữ liệu có nghĩa là chúng ta định cấu hình Lưới dữ liệu, cung cấp dữ liệu để kết xuất và Lưới xử lý tất cả các chức năng khác như sắp xếp, lọc và phân trang Chúng tôi có thể chuyển đổi mã hiện tại của mình sang sử dụng AG Grid chỉ với một vài thay đổi Cách thêm JavaScript và CSS lưới AGAG Grid là một thư viện nên chúng tôi sẽ bao gồm JavaScript cần thiết Nếu bạn đang sử dụng các công cụ xây dựng như <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
82, thì các lệnh <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
83 khác nhau được liệt kê trong tài liệu Bắt đầu với Lưới AGChúng tôi đang sử dụng JavaScript đơn giản, vì vậy chúng tôi có thể đưa <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
84 vào phần <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
85 của mình <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
0Điều này bao gồm phiên bản cộng đồng của Lưới AG và CSS cần thiết để hiển thị Lưới đúng cách <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
86 <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
87 của chúng ta không còn cần phải có bất kỳ phần tử <script type="text/javascript" charset="utf-8">
</script>
</body>
4 nào nữa <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
1Lưới AG sẽ tạo HTML cho Lưới dữ liệu khi chúng tôi thiết lập. Chúng tôi thêm <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
89 để sử dụng chủ đề Lưới AG. Trong ví dụ này, chúng tôi đang sử dụng chủ đề <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
90Lưới AG yêu cầu đặt chiều rộng và chiều cao cho <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
87. Tôi đã chọn thêm phần này làm phần <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
92 trong mã <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
2Lưới sẽ được hiển thị cao 500 pixel và lấp đầy chiều rộng <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
93 của màn hình. Điều này sao chép kiểu dáng cơ bản mà chúng ta đã có với bảng HTML. Nhưng nó cũng cho thấy một trong những lợi ích của việc sử dụng Lưới dữ liệu. Kích thước của bảng được hiển thị có thể được kiểm soát dễ dàng và các thanh cuộn sẽ được tự động thêm vào khi cần thiết bởi chính LướiCách định cấu hình lưới AG và kết xuất dữ liệuPhần <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
84 của mã thay đổi vì chúng tôi cần- Định cấu hình lưới dữ liệu
- Tạo lưới dữ liệu mới bằng cách sử dụng cấu hình
- Lấy dữ liệu và thêm nó vào lưới
Tôi sẽ hiển thị phần <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
84 được sửa đổi ban đầu bên dưới và sau đó giải thích nó trong các đoạn sau <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
3Lưới dữ liệu được điều khiển bởi dữ liệu và cấu hình – chúng ta không phải viết nhiều mã để tạo Lưới dữ liệu chức năng Trước tiên, chúng tôi tạo một mảng các Đối tượng Cột xác định các cột trong Lưới dữ liệu. Các cột này ánh xạ vào dữ liệu Dữ liệu mà chúng tôi nhận được từ lệnh gọi API có bốn thuộc tính. "userId", "id", "tiêu đề" và "đã hoàn thành" <script type="text/javascript" charset="utf-8">
</script>
</body>
1Để hiển thị những thứ này trong Lưới dữ liệu dưới dạng cột, chúng tôi tạo một Đối tượng có thuộc tính <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
96 trong đó giá trị là tên của thuộc tính trong Đối tượng dữ liệu <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
5Tiếp theo chúng ta tạo đối tượng <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
97. Thao tác này sẽ định cấu hình Lưới dữ liệu <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
6Thuộc tính <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
98 được gán mảng các Đối tượng Cột mà chúng ta đã xác định trước đóThuộc tính <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
99 được gán một hàm sẽ gọi hàm <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
17 khi lưới đã được tạo và hiển thị trong DOM (nghĩa là khi lưới đã sẵn sàng)Để thêm lưới vào trang, chúng tôi tìm phần tử <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
87 sẽ chứa lưới, sau đó khởi tạo một đối tượng Lưới AG mới cho phần tử đó và với các tùy chọn mà chúng tôi đã định cấu hình <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
7Chức năng tìm nạp dữ liệu và hiển thị dữ liệu trong lưới giống như mã <script type="text/javascript" charset="utf-8">
</script>
</body>
9 mà chúng tôi đã sử dụng cho bảng HTML động. Sự khác biệt là hàm <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
17 nhận một đối tượng AG Grid Api làm tham số, cho phép chúng ta gọi chức năng AG Grid để đặt dữ liệu hàng và kích thước các cột cho vừa với lưới <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
8Khi đoạn mã này chạy, về cơ bản chúng ta sẽ sao chép chức năng tương tự của bảng HTML động, nhưng bây giờ tất cả dữ liệu được hiển thị trong Lưới dữ liệu có thanh cuộn Để nhận được lợi ích của việc sử dụng Lưới dữ liệu và cho phép người dùng sắp xếp, lọc và điều hướng qua dữ liệu, chúng tôi chỉ phải sửa đổi cấu hình Cách thực hiện sắp xếp, lọc và phân trangĐây là những gì chúng tôi đã định cấu hình trong Lưới dữ liệu cho đến nay - trường nào từ dữ liệu để hiển thị
- sử dụng dữ liệu nào
Để thêm sắp xếp, lọc, thay đổi kích thước cột và phân trang, chúng tôi sửa đổi cấu hình <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
97 <div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
</table>
</div>
9Chúng tôi có thể định cấu hình các cột trong Lưới AG riêng lẻ bằng cách thêm các thuộc tính bổ sung vào các đối tượng <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
98. Hoặc nếu chức năng tương tự được yêu cầu theo mặc định trong tất cả các cột, chúng tôi có thể định cấu hình <script type="text/javascript" charset="utf-8">
</script>
</body>
06Ở đây chúng tôi định cấu hình nó để có thể sắp xếp, có thể lọc và thay đổi kích thước <script type="text/javascript" charset="utf-8">
</script>
</body>
0Bộ lọc mặc định mà chúng tôi đã xác định cho tất cả các cột là bộ lọc văn bản Để thêm phân trang tự động vào lưới, chúng tôi thêm thuộc tính <script type="text/javascript" charset="utf-8">
</script>
</body>
07 và Lưới AG sẽ tự động phân trang dữ liệu cho chúng tôiLưới dữ liệu với sắp xếp, lọc và phân trangLưới dữ liệu thân thiện với người dùngVới đoạn mã trên, chúng tôi đã tạo Lưới dữ liệu thân thiện với người dùng để tự động tìm nạp dữ liệu và thêm nó vào Lưới dữ liệu hỗ trợ sắp xếp, lọc và phân trang Đây là ví dụ Trang HTML lưới dữ liệu <script type="text/javascript" charset="utf-8">
</script>
</body>
1Bộ lọc sốVì các cột <script type="text/javascript" charset="utf-8">
</script>
</body>
08 và <script type="text/javascript" charset="utf-8">
</script>
</body>
09 là số, nên chúng tôi có thể sử dụng bộ lọc số bằng cách sửa đổi <!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
</style>
<h1>TODO List</h1>
<div id="data-table">
<table id="html-data-table">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>completed</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>My todo 1</td>
<td>false</td>
</tr>
</table>
</div>
</body>
</html>
98 <script type="text/javascript" charset="utf-8">
</script>
</body>
2Dưới đây là ví dụ Trang HTML Bộ lọc số lưới dữ liệu Có rất nhiều tùy chọn cấu hình cho các cột được liệt kê trong Tài liệu lưới AG, ví dụ như cấu hình chiều rộng, kiểu dáng và làm cho các ô có thể chỉnh sửa được Lợi ích của lưới dữ liệuĐối với nhiều trang web, một bảng HTML đơn giản sẽ là một cách hoàn toàn hợp lý để hiển thị dữ liệu dạng bảng. Nó nhanh và dễ hiểu, và với một chút CSS, bảng có thể trông đẹp mắt cho người dùng của bạn Khi các trang của bạn trở nên phức tạp hơn, hiển thị nhiều dữ liệu hơn hoặc yêu cầu nhiều tương tác hơn cho người dùng, thì việc sử dụng thành phần hoặc thư viện Lưới dữ liệu sẽ bắt đầu có ý nghĩa hơn Lưới dữ liệu cung cấp nhiều chức năng mà người dùng của bạn cần mà không phải viết nhiều mã. Trong ví dụ được trình bày trong bài đăng này, chúng tôi đã chuyển từ bảng động đọc dữ liệu từ API sang Lưới dữ liệu đọc từ API có sắp xếp, lọc, phân trang và thay đổi kích thước cột Đây là rất nhiều chức năng bổ sung, nhưng mã HTML của chúng tôi có cùng độ dài và JavaScript chúng tôi đã thêm ít phức tạp hơn vì Lưới dữ liệu đã thực hiện tất cả công việc hiển thị dữ liệu Lưới dữ liệu có thể xử lý hàng trăm nghìn hàng và cập nhật nhanh chóng nên chúng thường được sử dụng trong các hệ thống giao dịch tài chính thời gian thực với giá trong các ô cập nhật cứ sau vài mili giây Nếu bạn đang sử dụng React, thì ngoài AG Grid, bạn có thể xem Material UI hoặc React Table. Bảng phản ứng là một 'bảng' chứ không phải là Lưới dữ liệu nên ban đầu cần thêm một chút mã để hiển thị bảng Cả UI UI và React Table đều chỉ khả dụng cho React. AG Grid là khuôn khổ bất khả tri và sẽ hoạt động với JavaScript, TypeScript, React, Angular và Vue Mã nguồn cho bài đăng này có thể được tìm thấy trong repo Github này trong thư mục docs/html-table-to-data-grid QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO
Alan RichardsonAlan Richardson là Nhà phát triển phần mềm, Lập trình viên, Người kiểm thử và Nhà tiếp thị. Tác giả của nhiều cuốn sách và các khóa đào tạo trực tuyến
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Làm cách nào để chỉnh sửa hàng của bảng một cách linh hoạt trong JavaScript?
hàm edit_row(no) { tài liệu. getElementById("edit_button" + không). Phong cách. hiển thị = "không"; tài liệu. getElementById("save_button" + không). Phong cách. . tên var = tài liệu. getElementById("tên_hàng" + không); var quốc gia = tài liệu. getElementById("country_row" + no); var tuổi = tài liệu. getElementById("age_row" + no); Làm cách nào để cập nhật hàng trong bảng HTML bằng JavaScript?
Chèn một cột trống mới vào cuối bảng Chèn năm cột trống mới vào đầu bảng Chèn một cột mới với các giá trị điền sẵn vào cuối bảng Chèn một hàng trống mới vào cuối bảng Chèn một hàng mới được điền trước ngay sau hàng thứ hai Làm cách nào để tự động thêm các hàng trong bảng HTML bằng JavaScript?
Để tôi cung cấp cho bạn mã java script để thêm và xóa hàng. . hàm addRow(tableID) { bảng var = tài liệu. getElementById(bảngID); var rowCount = bảng. hàng. chiều dài; hàng var = bảng. insertRow(rowCount); //Cột 1 var ô1 = hàng. chènCell(0); var phần tử1 = tài liệu. createElement("đầu vào"); Làm cách nào để chỉnh sửa hàng đã chọn từ bảng HTML bằng JQuery?
Để thực hiện điều này, chúng ta chỉ cần tạo một tệp html. Sau đó ta thêm Bootstrap cho đẹp mắt rồi thêm file JQuery. Bây giờ chúng ta sẽ tạo một hàng mới một bảng trong JQuery bằng cách viết đoạn mã dưới đây. Chúng tôi cũng sẽ viết mã trong JQuery để chỉnh sửa và xóa dữ liệu hàng | 
