Trong ví dụ đã cho, chúng tôi đã tạo một bảng. Tài liệu phương pháp. getElementById['div'] lấy id của bảng và tham chiếu thuộc tính 'khả năng hiển thị' với đối tượng kiểu. Thuộc tính 'khả năng hiển thị' làm cho phần tử hiển thị hoặc ẩn. Giờ đây, nếu bạn áp dụng thuộc tính khả năng hiển thị có giá trị "ẩn" cho bảng, thì bảng sẽ biến mất và nếu bạn sử dụng giá trị "hiển thị" thì bảng sẽ hiển thị lại. Khi bạn tải trang, bạn sẽ nhận được hai nút. Khi nhấp vào nút 'Hiển thị', hàm showTable[] được gọi và bảng sẽ hiển thị. Nhưng khi nhấp vào nút 'Ẩn', hàm hideTable[] được gọi làm cho bảng ẩn đi
Đây là mã
Show or Hide table in JavaScript
function showTable[]{
document.getElementById['table'].style.visibility = "visible";
}
function hideTable[]{
tài liệu. getElementById['bảng']. Phong cách. khả năng hiển thị = "hidden";
}
| 1 | Angelina | Delhi |
| 2 | Simran | Mumbai |
| 3 | Sania | Chennai |
| 4 | Martina | Kolkata |
Đầu ra sẽ được hiển thị dưới dạng
Khi nhấp vào nút 'hiển thị', bảng sẽ được hiển thị
Tải xuống mã nguồn
Bài viết này là tổng quan về một số phương thức DOM cấp 1 mạnh mẽ, cơ bản và cách sử dụng chúng từ JavaScript. Bạn sẽ tìm hiểu cách tạo, truy cập, kiểm soát và xóa các phần tử HTML một cách linh hoạt. Các phương thức DOM được trình bày ở đây không dành riêng cho HTML; . Các minh họa được cung cấp ở đây sẽ hoạt động tốt trong mọi trình duyệt hiện đại
Ghi chú. Các phương thức DOM được trình bày ở đây là một phần của đặc tả cấp 1 Mô hình Đối tượng Tài liệu [Lõi]. DOM cấp 1 bao gồm cả các phương thức để truy cập và thao tác tài liệu chung [DOM 1 Core] cũng như các phương thức dành riêng cho tài liệu HTML [DOM 1 HTML]
Tạo một bảng HTML động
Thí dụ
Trong ví dụ này, chúng tôi thêm một bảng mới vào trang khi nhấp vào nút
HTML
JavaScript
function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
Chủ Đề