Trang động trong HTML W3Schools

Hướng dẫn này sẽ hướng dẫn bạn cách tạo một bảng HTML động thông qua việc sử dụng Javascript và thao tác Mô hình đối tượng tài liệu (DOM). Số lượng hàng của bảng và nội dung ô sẽ khác nhau tùy thuộc vào dữ liệu của bạn

Trong hướng dẫn này, tôi sẽ tạo bảng điểm cho trò chơi điện tử Javascript và dữ liệu sẽ đến từ yêu cầu tìm nạp. Nguồn dữ liệu cho ứng dụng của bạn có thể khác, nhưng logic vẫn phải áp dụng. Hướng dẫn này sẽ bao gồm ảnh chụp màn hình mã, kết xuất trang web và toàn bộ HTML ở mỗi bước trong hướng dẫn

Mã thân thiện với sao chép-dán ở cuối. 🔥

Dữ liệu cho bảng HTML này đến từ bảng cơ sở dữ liệu SQLite. Số lượng hàng sẽ thay đổi tùy thuộc vào số lượng bản ghi trong bảng điểm

Đây là một ví dụ về dữ liệu chúng tôi sẽ làm việc với

Thẻ bảng HTML

Một bảng HTML bao gồm một

phần tử và một hoặc nhiều phần tử và các phần tử cho các tùy chọn kiểu dáng bổ sung

Định nghĩa thẻ

Các

, và phần tử

Bảng HTML này cũng sẽ bao gồm tùy chọn

thẻ định nghĩa một bảng HTML

Các

thẻ xác định một hàng trong bảng HTML

Các

thẻ được sử dụng để nhóm nội dung tiêu đề trong bảng HTML

Các

thẻ được sử dụng để nhóm nội dung cơ thể trong bảng HTML

Chúng tôi sẽ tạo tất cả các thẻ được xác định ở trên thông qua phương thức tài liệu *tài liệu. createElement(tagName)* và chúng ta sẽ thêm chúng vào một

thẻ trong tệp html của chúng tôi

Hầu hết các 'tên lớp' mà bạn sẽ thấy trong mã đều có mục đích tạo kiểu và hoàn toàn không bắt buộc

Kiểu dáng CSS sẽ không được thảo luận, nhưng nó sẽ có sẵn để bạn tự tham khảo và thử nghiệm

hướng dẫn

Các

sẽ chứa bảng của chúng tôi như sau.

Các bước tạo bảng

• Tìm div 'bảng điểm' bằng phương thức tài liệu *tài liệu. querySelector(bộ chọn). *

• Tạo một mảng các chuỗi chứa các giá trị tiêu đề cho dữ liệu mà bạn muốn hiển thị. Tôi tin rằng đây là những dữ liệu đại diện hơn cho dữ liệu tôi sẽ hiển thị và nó cho phép tôi bao gồm các đơn vị trong ngoặc đơn. (Đây là bước tùy chọn vì bạn có thể sử dụng các phím đối tượng làm tiêu đề)

  let tableHeaders = [“Xếp hạng toàn cầu”, “Tên người dùng”, “Điểm số”, “Thời gian tồn tại [giây]”, “Độ chính xác [%]”]

• Tạo các

thẻ xác định ô tiêu đề trong bảng HTML

Các

thẻ xác định một ô dữ liệu tiêu chuẩn trong bảng HTML

Các

.

Tạo và nối thêm các

phần tử vào bảng. Phần này chứa phần tử đầu tiên có tất cả 5 chuỗi trong biến 'tableHeaders' được hiển thị ở trên dưới dạng các giá trị bên trong phần tử tương ứng với bảng. Điều này sẽ cho phép chúng tôi nối các thẻ tương ứng với từng bản ghi điểm trong bảng điểm của chúng tôi sau này

thêm vào

yếu tố tế bào

Tạo và nối thêm các

lên ‘bảng điểm’

.

Chức năng đạt được các bước được nêu ở trên

Kết xuất của bảng (tại thời điểm này)

HTML cho div 'Bảng điểm' và Bảng HTML động (tại thời điểm này)

• Tìm bảng HTML mà chúng ta đã tạo ở trên bằng phương thức document *document. querySelector(bộ chọn). *

• Tạo tất cả các hàng trong thân bảng đại diện cho từng điểm cao. Đây sẽ là

các thẻ sẽ giữ thẻ cho từng cột trong bảng của bạn. Hàm sau sẽ tạo một hàng mới khi được cung cấp một đối tượng điểm

Ví dụ về đối tượng singleScore đang được chuyển vào chức năng tiếp theo

singleScore = {

    "id": 6,

    "score": 115,

    "time_alive": 70.659,

    "accuracy": 17.1,

    "user_id": 1,

    "user": {

        "username": "daniel"

    }

}

Hàm đạt được các bước trên

Hiển thị toàn bộ bảng

HTML hoàn chỉnh cho div 'Bảng điểm' và Bảng HTML động

Cuối cùng, tôi đã đề cập rằng bảng ví dụ này dựa vào một lần tìm nạp để nhận dữ liệu của nó. Đây là mã cho quá trình tìm nạp cung cấp tất cả các điểm riêng lẻ cho hàm 'appendScores'

Ngoài việc thêm nội dung động, bạn có thể kết hợp logic ứng dụng phức tạp vào các trang web bằng cách sử dụng các hành vi của máy chủ. Các hành vi của máy chủ là các đoạn mã phía máy chủ được xác định trước để thêm logic ứng dụng vào các trang web, mang lại khả năng tương tác và chức năng tốt hơn

Các hành vi của máy chủ Dreamweaver cho phép bạn thêm logic ứng dụng vào trang web mà không phải tự viết mã. Các hành vi máy chủ được cung cấp với Dreamweaver hỗ trợ các loại tài liệu ColdFusion, ASP và PHP. Các hành vi của máy chủ được viết và kiểm tra để nhanh chóng, an toàn và mạnh mẽ. Các hành vi máy chủ tích hợp hỗ trợ các trang web đa nền tảng cho tất cả các trình duyệt

Dreamweaver cung cấp giao diện trỏ và nhấp giúp áp dụng nội dung động và các hành vi phức tạp vào một trang dễ dàng như chèn các yếu tố thiết kế và văn bản. Các hành vi máy chủ sau đây khả dụng

Làm cách nào để tạo một trang web động trong HTML?

Làm cách nào để tạo trang đăng nhập động trong HTML?

Làm cách nào để tạo trang động trong JavaScript?

Làm cách nào để tạo trang chủ trong HTML?