Hướng dẫn dynamic table javascript - javascript bảng động

Thẻ

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

Thẻ

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

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ẽ chứa bảng của chúng tôi là như sau:

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

• Tìm ‘bảng điểm Div Div với phương thức 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 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 ngoặc. [Đây là một 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 = [“Global Ranking”, “Username”, “Score”, “Time Alive [seconds]”, “Accuracy [%]”]

• Tạo ra.
• Tạo và nối thêm phần tử vào bảng. Điều này chứa phần tử đầu tiên với 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 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 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.

• 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 cơ thể 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 cho một đối tượng điểm.

Ví dụ về đố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"    }}

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 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:

Tôi hy vọng bạn đã tìm thấy hướng dẫn này hữu ích. Nếu bạn có bất kỳ câu hỏi, hãy hỏi họ dưới đây.

Dưới đây là một video ngắn của ứng dụng mà tôi đã tạo bảng cụ thể này cho!

Tất cả các mã trong đoạn trích:

const scoreDiv = document.querySelector["div.scoreboard"] // Find the scoreboard div in our htmllet tableHeaders = ["Global Ranking", "Username", "Score", "Time Alive [seconds]", "Accuracy [%]"]const createScoreboardTable = [] => {while [scoreDiv.firstChild] scoreDiv.removeChild[scoreDiv.firstChild] // Remove all children from scoreboard div [if any]let scoreboardTable = document.createElement['table'] // Create the table itselfscoreboardTable.className = 'scoreboardTable'let scoreboardTableHead = document.createElement['thead'] // Creates the table header group elementscoreboardTableHead.className = 'scoreboardTableHead'let scoreboardTableHeaderRow = document.createElement['tr'] // Creates the row that will contain the headersscoreboardTableHeaderRow.className = 'scoreboardTableHeaderRow'// Will iterate over all the strings in the tableHeader array and will append the header cells to the table header rowtableHeaders.forEach[header => {let scoreHeader = document.createElement['th'] // Creates the current header cell during a specific iterationscoreHeader.innerText = headerscoreboardTableHeaderRow.append[scoreHeader] // Appends the current header cell to the header row}]scoreboardTableHead.append[scoreboardTableHeaderRow] // Appends the header row to the table header group elementscoreboardTable.append[scoreboardTableHead]let scoreboardTableBody = document.createElement['tbody'] // Creates the table body group elementscoreboardTableBody.className = "scoreboardTable-Body"scoreboardTable.append[scoreboardTableBody] // Appends the table body group element to the tablescoreDiv.append[scoreboardTable] // Appends the table to the scoreboard div}// The function below will accept a single score and its index to create the global rankingconst appendScores = [singleScore, singleScoreIndex] => {const scoreboardTable = document.querySelector['.scoreboardTable'] // Find the table we createdlet scoreboardTableBodyRow = document.createElement['tr'] // Create the current table rowscoreboardTableBodyRow.className = 'scoreboardTableBodyRow'// Lines 72-85 create the 5 column cells that will be appended to the current table rowlet scoreRanking = document.createElement['td']scoreRanking.innerText = singleScoreIndexlet usernameData = document.createElement['td']usernameData.innerText = singleScore.user.usernamelet scoreData = document.createElement['td']scoreData.innerText = singleScore.scorelet timeData = document.createElement['td']timeData.innerText = singleScore.time_alivelet accuracyData = document.createElement['td']accuracyData.innerText = singleScore.accuracyscoreboardTableBodyRow.append[scoreRanking, usernameData, scoreData, timeData, accuracyData] // Append all 5 cells to the table rowscoreboardTable.append[scoreboardTableBodyRow] // Append the current row to the scoreboard table body}const getScores = [] => {fetch['//localhost:3000/scores'] // Fetch for all scores. The response is an array of objects that is sorted in decreasing order.then[res => res.json[]].then[scores => {createScoreboardTable[] // Clears scoreboard div if it has any children nodes, creates & appends the table// Iterates through all the objects in the scores array and appends each one to the table bodyfor [const score of scores] {let scoreIndex = scores.indexOf[score] + 1 // Index of score in score array for global ranking [these are already sorted in the back-end]appendScores[score, scoreIndex] // Creates and appends each row to the table body}}]}

Tất cả các kiểu dáng CSS cho bảng trong hướng dẫn này:

.scoreboardTable {padding: 0;margin: auto;border-collapse: collapse;width: 80%;text-align: center;color: whitesmoke;}.scoreboardTableHeaderRow {color: darkorange;font-weight: bold;height: 50px;}.scoreboardTableBodyRow:nth-child[odd]{background-color: rgba[128, 128, 128, 0.050];}#latestUserScore {background-color: crimson;}.scoreboardTableBodyRow:hover{background-color: darkorange;}.scoreboardTable tr td {height: 25px;}