Làm cách nào để điền dữ liệu vào bảng html?

Question

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách điền Bảng HTML từ API bên ngoài bằng JavaScript

Nội dung chính Show

Cách tạo bảng bằng JavaScript. những gì bạn sẽ học
Cách tạo bảng bằng JavaScript. yêu cầu
Cách tạo bảng bằng JavaScript. điều tra các yêu cầu
Cách tạo bảng bằng JavaScript. tạo đầu bảng
Cách tạo bảng bằng JavaScript. tạo hàng và ô
Cách tạo bảng bằng JavaScript. kết thúc
Làm cách nào để tự động điền bảng trong HTML?
Làm cách nào để điền vào bảng HTML bằng dữ liệu JSON?
Làm cách nào chúng ta có thể tạo ô dữ liệu trong bảng trong HTML?
Làm cách nào để chèn dữ liệu XML vào bảng HTML?

API bên ngoài sẽ được gọi bằng lệnh gọi XmlHttpRequest (XHR) và AJAX

API kiểm tra ASPSnippets

API sau sẽ được sử dụng trong bài viết này

https. // thô. githubusercontent. com/aspsnippets/test/master/Khách hàng. json

API trả về JSON sau

[

{

"ID khách hàng". 1,

"Tên". "John Hammond",

"Quốc gia". "Hoa Kỳ"

},

{

"ID khách hàng". 2,

"Tên". "Mudassar Khan",

"Quốc gia". "Ấn Độ"

},

{

"ID khách hàng". 3,

"Tên". "Suzanne Mathews",

"Quốc gia". "Pháp"

},

{

"ID khách hàng". 4,

"Tên". "Robert Schneider",

"Quốc gia". "Nga"

}

]

Đánh dấu HTML

Đánh dấu HTML sau bao gồm một phần tử HTML DIV

<h4>Khách hàngh4>

<giờ/>

Hàm JavaScript để điền Bảng HTML từ API

Bên trong cửa sổ. trình xử lý sự kiện onload, một yêu cầu AJAX XmlHttpRequest (XHR) được gửi tới API

Bên trong trình xử lý sự kiện onload của yêu cầu AJAX XmlHttpRequest (XHR), phản hồi nhận được được chuyển đổi thành Mảng JavaScript bằng cách sử dụng JSON. phân tích cú pháp chức năng JavaScript và đặt trong biến khách hàng

Thêm hàng tiêu đề

Hàng tiêu đề sẽ được tạo bằng cách sử dụng phần tử Bảng TH, được tạo bằng phương thức createElement

Thêm hàng dữ liệu

Một vòng lặp được thực thi trên các phần tử Mảng và từng Hàng một được tạo trong Bảng HTML

Phương thức insertRow của bảng. Phương thức này thêm một hàng mới vào Bảng tại chỉ mục đã chỉ định. Nếu chỉ mục được cung cấp là -1 thì hàng sẽ được thêm vào vị trí cuối cùng

Sau đó, bên trong mỗi Hàng, một Ô được thêm vào bằng phương thức Bảng chènCell

Phương thức chèn hàng của bảng. Phương thức này thêm một ô mới vào Hàng của Bảng tại chỉ mục đã chỉ định. Nếu chỉ mục được cung cấp là -1 thì hàng sẽ được thêm vào vị trí cuối cùng

Thêm Bảng động vào Trang

Cuối cùng, bảng được tạo động sẽ được thêm vào trang bằng cách thêm nó vào HTML DIV bằng phương thức appendChild

Cần những gì để tạo một bảng với vanilla JavaScript?

Đây luôn là thời điểm tốt để làm mới các kỹ năng JavaScript của bạn. thao tác DOM với API gốc là một chủ đề xuất hiện rất nhiều trong các cuộc phỏng vấn kỹ thuật

Trong hướng dẫn sau đây, chúng ta sẽ xem những gì cần thiết để tạo một bảng với vanilla JavaScript mà không cần dùng đến bất kỳ thư viện hoặc khuôn khổ nào

Cách tạo bảng bằng JavaScript. những gì bạn sẽ học

Trong hướng dẫn này, bạn sẽ học cách

tạo bảng bằng JavaScript
sử dụng API DOM gốc để thao tác với bảng

Cách tạo bảng bằng JavaScript. yêu cầu

Để làm theo hướng dẫn này, bạn cần có hiểu biết cơ bản về HTML và JavaScript

Cách tạo bảng bằng JavaScript. điều tra các yêu cầu

Bạn được yêu cầu tạo một bảng HTML bằng JavaScript. Bắt đầu từ một mảng "núi", nhiệm vụ của bạn là tạo bảng gán mọi khóa cho một cột và một hàng cho mỗi đối tượng

Mỗi đối tượng có hình dạng sau

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

Chúng tôi có một cái tên, chiều cao và vị trí của đỉnh nằm trong. Nhưng điều gì tạo nên một bảng HTML? . Điều đó có nghĩa là đưa ra mảng sau

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }
];

Chúng tôi đang mong đợi để tạo ra bảng sau

<table>
    <thead>
    <tr>
        <th>nameth>
        <th>heightth>
        <th>placeth>
    tr>
    thead>
    <tbody>
    <tr>
        <td>Monte Falcotd>
        <td>1658td>
        <td>Parco Foreste Casentinesitd>
    tr>
    <tr>
        <td>Monte Falteronatd>
        <td>1654td>
        <td>Parco Foreste Casentinesitd>
    tr>
    tbody>
table>

Như bạn có thể thấy bảng có một thead (đầu bảng) chứa một tr (hàng của bảng) mà lần lượt chứa ba thứ (tiêu đề bảng)

Sau đó, có tbody (thân bảng) chứa một loạt tr (hàng của bảng). Mỗi hàng của bảng chứa một số phần tử td nhất định (các ô của bảng)

Với những yêu cầu này, chúng tôi có thể bắt đầu mã hóa tệp JavaScript của mình. Điểm xuất phát của chúng tôi có thể là HTML sau

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build a tabletitle>
head>
<body>
<table>

table>
body>
<script src="build-table.js">script>
html>

Lưu tệp dưới dạng bảng xây dựng. html và chuyển sang phần tiếp theo

Cách tạo bảng bằng JavaScript. tạo đầu bảng

Tạo một tệp mới có tên là bảng xây dựng. js trong cùng thư mục với bảng xây dựng. html và bắt đầu tệp với mảng sau

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

Mục tiêu đầu tiên của chúng tôi là tạo đầu bảng. Nhưng chúng ta hãy suy nghĩ một chút về nó. Chúng ta biết rằng phương thức gốc createElement() tạo ra bất kỳ phần tử nào mà chúng ta truyền vào nó. Giả sử chúng ta muốn tạo một đầu bảng, chúng ta có thể làm tài liệu. createElement('đầu'). Nhưng chúng ta có một sự thay thế tốt hơn?

Hãy chuyển sang MDN, tại phần tham khảo bảng thành phần. Bạn có thể thấy rằng giao diện DOM cho bảng là HTMLTableElement

Điều thú vị đối với HTMLTableElement là các phương thức mà nó hiển thị. Trong số các phương thức có createTHead(). Chơi lô tô. createTHead trả về phần tử đầu bảng được liên kết với một bảng nhất định, nhưng tốt hơn, nếu không có tiêu đề nào tồn tại trong bảng, thì createTHead sẽ tạo một tiêu đề cho chúng tôi

Được trang bị kiến thức này, hãy tạo một hàm trong tệp của chúng tôi, lấy bảng làm tham số. Đưa ra bảng, chúng ta có thể tạo một thead mới bên trong nó

function generateTableHead(table) {
  let thead = table.createTHead();
}

Bây giờ, hãy lấy bảng của chúng ta (hãy nhớ rằng chúng ta có một cái trong bảng xây dựng. html) và chuyển nó vào chức năng của chúng tôi

function generateTableHead(table) {
  let thead = table.createTHead();
}

let table = document.querySelector("table");
generateTableHead(table);

Nếu bạn gọi build-table. html trong trình duyệt, bạn sẽ không thấy gì trên màn hình nhưng bảng điều khiển dành cho nhà phát triển sẽ hiển thị cho bạn một quảng cáo ngay bên trong bảng. Chúng tôi đang đi được một nửa chặng đường để điền vào đầu bảng. Chúng tôi thấy rằng đầu bảng chứa một hàng chứa đầy thứ (tiêu đề bảng). Mỗi tiêu đề bảng phải ánh xạ tới một khóa mô tả dữ liệu của chúng tôi được tạo từ gì

Thông tin đã có sẵn, bên trong đối tượng đầu tiên trong mảng núi. Chúng ta có thể lặp lại các khóa của đối tượng đầu tiên

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
    //
];

và tạo ba tiêu đề bảng với các khóa đã nói. Nhưng trước tiên chúng ta cần thêm một hàng vào quảng cáo của mình. Thế nào? . createElement('tr')? . HTMLTableRowElement của chúng tôi đủ tử tế để cung cấp phương thức insertRow(), được gọi trên tiêu đề bảng của chúng tôi. Hãy cấu trúc lại một chút hàm generateTableHead của chúng ta

________số 8

Và trong khi chúng tôi ở đó, hãy nghĩ đến việc điền vào đầu bảng. Hàng mới phải chứa ba thứ (tiêu đề bảng). Chúng ta cần tạo các phần tử thứ này theo cách thủ công và với mỗi thứ (tiêu đề bảng), chúng ta sẽ thêm một nút văn bản. Hàm của chúng tôi có thể lấy một tham số khác để lặp lại

function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

let table = document.querySelector("table");
let data = Object.keys(mountains[0]);
generateTableHead(table, data);

Lưu tệp và làm mới bảng xây dựng. html. bạn sẽ thấy đầu bảng của mình được điền tên, chiều cao và vị trí làm tiêu đề bảng. Xin chúc mừng. Đôi khi, thật tuyệt khi tạm dừng React và Vue chỉ để nhớ lại việc thao tác DOM trực tiếp khó khăn và cồng kềnh như thế nào. Nhưng ở lại đây. Chúng tôi vẫn chưa hoàn thành

Thời gian điền vào bảng

Cách tạo bảng bằng JavaScript. tạo hàng và ô

Để điền vào bảng, chúng ta sẽ thực hiện theo một cách tiếp cận tương tự nhưng lần này chúng ta cần lặp lại mọi đối tượng trong mảng núi. Và trong khi chúng tôi đang ở bên trong cho. của vòng lặp, chúng tôi sẽ tạo một hàng mới cho mọi mục

Để tạo hàng, bạn sẽ sử dụng insertRow()

Nhưng chúng ta không thể dừng lại ở đây. Bên trong vòng lặp chính, chúng ta cần một vòng lặp bên trong, lần này là for. Trong. Vòng lặp bên trong lặp qua mọi khóa của đối tượng hiện tại và đồng thời nó

tạo một ô mới
tạo một nút văn bản mới
nối thêm nút văn bản vào ô

Các ô được tạo bằng một phương thức hữu ích khác của HTMLTableRowElement, insertCell()

Đó là, với logic ở trên, chúng ta có thể điền vào bảng của mình. Mở bảng xây dựng. js và tạo một hàm mới có tên là generateTable. Chữ ký có thể giống như chức năng hiện có của chúng tôi

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }
];

0

Để chạy chức năng này, bạn sẽ gọi nó như vậy

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }
];

1

Chúng ta hãy xem mã hoàn chỉnh

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }
];

2

Bạn có nghĩ rằng nó hoạt động?

Làm cách nào để điền dữ liệu vào bảng html?

Ồ. Có vẻ như các hàng của chúng tôi đang được thêm vào đầu bảng chứ không phải vào thân bảng. Ngoài ra, không có thân bàn

Nhưng điều gì sẽ xảy ra nếu chúng ta thay đổi thứ tự chức năng?

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" }
];

3

và làm mới lại trình duyệt

nó hoạt động. Thêm vào đó, chúng tôi có một tbody (thân bàn) miễn phí. Làm thế nào vậy?

Tốt lắm. Mã của chúng tôi có thể không được tổ chức tốt (quá nhiều ràng buộc toàn cầu) nhưng chúng tôi sẽ đề cập đến vấn đề đó ở một trong các bài đăng tiếp theo

Bây giờ bạn có thể thao tác với các bảng HTML mà không cần bất kỳ thư viện bên ngoài nào. chúc mừng

Cách tạo bảng bằng JavaScript. kết thúc

Trong hướng dẫn này, chúng ta đã thấy cách tạo bảng bằng JavaScript. Một bảng HTML được biểu diễn trong DOM bởi HTMLTableElement. Giao diện này hiển thị rất nhiều phương thức hữu ích để thao tác với các đầu bảng bằng createTHead và các hàng của bảng bằng insertRow

Mặt khác, các hàng của bảng HTML kế thừa từ HTMLTableRowElement. Giao diện này có hai phương thức, một trong những phương thức quan trọng nhất là insertCell

Đưa ra một mảng các đối tượng, có thể lặp lại chúng với lệnh for. vòng lặp để tạo các hàng trong bảng. Sau đó, đối với mỗi đối tượng, chúng ta có thể lặp lại với for. trong để tạo các ô bảng

Làm cách nào để tự động điền bảng trong HTML?

Tạo bảng động (quay lại Sample1. .

Lấy đối tượng body (mục đầu tiên của đối tượng tài liệu)

Tạo tất cả các yếu tố

Cuối cùng, nối từng con theo cấu trúc bảng (như hình trên). Mã nguồn sau đây là phiên bản nhận xét cho sample1. html

Làm cách nào để điền vào bảng HTML bằng dữ liệu JSON?

Hàm đầu tiên (get_json_data) lấy dữ liệu json từ tệp json bên ngoài. Hàm thứ hai (append_json) nối thêm dữ liệu vào bảng . Tôi đã đặt các nhận xét trong toàn bộ mã để giải thích mọi thứ đang làm gì. nếu bạn có bất kỳ câu hỏi hoặc nếu một cái gì đó không rõ ràng cho tôi biết.

Làm cách nào chúng ta có thể tạo ô dữ liệu trong bảng trong HTML?

- dùng để tạo các ô dữ liệu.

Làm cách nào để chèn dữ liệu XML vào bảng HTML?

Để liên kết dữ liệu XML với bảng HTML, thêm thuộc tính datasrc (nguồn dữ liệu) vào thành phần bảng, sau đó thêm thuộc tính datafld (trường dữ liệu) vào bất kỳ nội tuyến nào khác . Các thẻ eg.

, or tags between the

elements.

programming html

Làm cách nào để điền dữ liệu vào bảng html?

Cách tạo bảng bằng JavaScript. những gì bạn sẽ học

Cách tạo bảng bằng JavaScript. yêu cầu

Cách tạo bảng bằng JavaScript. điều tra các yêu cầu

Cách tạo bảng bằng JavaScript. tạo đầu bảng

Cách tạo bảng bằng JavaScript. tạo hàng và ô

Cách tạo bảng bằng JavaScript. kết thúc

Làm cách nào để tự động điền bảng trong HTML?

Làm cách nào để điền vào bảng HTML bằng dữ liệu JSON?

Làm cách nào chúng ta có thể tạo ô dữ liệu trong bảng trong HTML?

Làm cách nào để chèn dữ liệu XML vào bảng HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội