Js html động

Hướng dẫn này sẽ hướng dẫn bạn cách tạo bảng thông tin HTML thông qua việc sử dụng thao tác mô hình đối tượng JavaScript và tài liệu (DOM). Số lượng hàng bảng và ô nội dung sẽ thay đổi 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 một bảng điểm cho trò chơi JavaScript video và dữ liệu sẽ đến từ một yêu cầu tìm kiếm tải. Nguồn dữ liệu cho ứng dụng của bạn có thể khác nhau, nhưng logic vẫn nên được áp dụng. Hướng dẫn này sẽ bao gồm ảnh chụp màn hình cho mã, đầu ra của trang web và HTML đầy đủ ở mỗi bước trong hướng dẫn

Mã thân thiện với bản sao ở cuối. 🔥

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

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

Bảng thẻ HTML

A table HTML bao gồm một phần tử

và một hoặc nhiều, và các phần tử

Bảng HTML này cũng sẽ bao gồm các tùy chọn và các yếu tố cấu thành các tùy chọn kiểu dáng bổ sung

Định nghĩa thẻ

Thẻ

định nghĩa bảng HTML

Thẻ

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

Thẻ

let tableHeaders = [“Global Ranking”, “Username”, “Score”, “Time Alive [seconds]”, “Accuracy [%]”]

0 xác định một tiêu đề ô trong bảng HTML

Thẻ

let tableHeaders = [“Global Ranking”, “Username”, “Score”, “Time Alive [seconds]”, “Accuracy [%]”]

1 xác định tiêu chuẩn ô dữ liệu trong bảng HTML

Các

let tableHeaders = [“Global Ranking”, “Username”, “Score”, “Time Alive [seconds]”, “Accuracy [%]”]

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

Các

let tableHeaders = [“Global Ranking”, “Username”, “Score”, “Time Alive [seconds]”, “Accuracy [%]”]

1 được sử dụng cho 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

Hầu hết các tên lớp mà bạn sẽ thấy trong mã đều ở đó cho mục đích tạo kiểu và hoàn toàn tùy chọn

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

Hướng dẫn

Điều đó sẽ bao gồm bảng của chúng tôi là như sau

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

• Find ‘bảng điểm Div Div with the document method. 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 quan tâm đến việc hiển thị. Tôi tin rằng đây là những đại diện hơn cho dữ liệu tôi sẽ hiển thị và nó cho phép tôi đưa các đơn vị vào rãnh. (Đây là một bước tùy chọn vì bạn có thể sử dụng các đối tượng bàn phím làm tiêu đề)

let tableHeaders = [“Global Ranking”, “Username”, “Score”, “Time Alive [seconds]”, “Accuracy [%]”]

• Create out
• Tạo và nối thêm phần tử vào bảng. Điều này bao gồm phần tử đầu tiên với tất cả 5 chuỗi trong biến ‘TableHeaders được hiển thị ở bên dưới định dạng giá trị bên trong các phần tử tương ứng
• Tạo và nối thêm phần tử vào bảng. Điều này sẽ cho phép chúng tôi kết nối các thẻ tương ứng với mỗi bản ghi điểm trong bảng điểm của chúng tôi sau đó
• Nối thêm vào bảng điểm

Hàm đạt được các bước được nêu ở trên. Kết quả của bảng (tại thời điểm này). HTML for table point ‘bảng điểm và HTML dynamic table (tại thời điểm này)

• Tìm bảng HTML chúng tôi đã tạo ở trên với tài liệu Phương thức tài liệu. QuerySelector (Bộ chọn)
• Tạo tất cả các hàng bảng đại diện cho mỗi điểm cao. Đây sẽ là các thẻ sẽ chứa một thẻ cho mỗi một trong các cột trong bảng của bạn. Hàm sau sẽ tạo một hàng mới khi được chọn cho một đối tượng

Ví dụ về các đối tượng singlescore đang được chuyển vào hàm tiếp theo

singleScore = {    "id": 6,    "score": 115,    "time_alive": 70.659,    "accuracy": 17.1,    "user_id": 1,    "user": {        "username": "daniel"    }}

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

Bảng kết xuất đầy đủ. Hoàn thành HTML cho ‘bảng điểm Div và bảng HTML động

Cuối cùng, tôi đã đề cập rằng bảng ví dụ này dựa trên một lần tìm kiếm để nhận dữ liệu của nó. Dưới đây là mã cho Fetch cung cấp tất cả các điểm riêng cho chức năng 'appendscores'

Ví dụ 7-3. tiếng vang trang. php. Chào mừng đến với PHP