programming html

Cách chuyển dữ liệu từ bảng json sang html?

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách chuyển đổi dữ liệu JSON sang Bảng HTML bằng JavaScript

Bảng HTML sẽ được tạo động bằng cách lặp qua các phần tử mảng JSON trên Nút bấm bằng JavaScript

Đánh dấu HTML

Đánh dấu HTML sau bao gồm Nút HTML và phần tử DIV HTML. Nút HTML đã được chỉ định một trình xử lý sự kiện OnClick gọi hàm JavaScript GenerateTable

Hàm JavaScript để chuyển đổi dữ liệu JSON sang Bảng HTML

Bên trong hàm GenerateTable JavaScript, đầu tiên một Mảng JSON được tạo. Mảng JSON chứa các giá trị Tiêu đề và Ô của Bảng

Bảng HTML

Đầu tiên, một Bảng HTML động được tạo bằng phương thức JavaScript createElement

Thêm hàng tiêu đề

Hàng Tiêu đề sẽ được tạo bằng cách sử dụng phần tử đầu tiên của Mảng vì nó chứa các giá trị văn bản của cột Tiêu đề

Đầu tiên, một hàng được chèn vào Bảng và sau đó sử dụng số lượng cột, một vòng lặp được thực thi và từng phần tử của Bảng TH được tạo bằng phương thức createElement

Phương pháp chèn 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.

Thêm hàng dữ liệu

Một vòng lặp được thực hiện trên các phần tử mảng và từng Hàng một được tạo trong Bảng HTML. 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 được thêm vào trang bằng cách thêm nó vào HTML DIV bằng phương thức appendChild

Lưu ý. Bạn cũng có thể thêm một phần tử vào nội dung nhưng sau đó bạn sẽ không thể đặt vị trí của phần tử đó trên trang. Sử dụng một thùng chứa DIV như vậy giúp chúng ta thêm phần tử động vào nơi mong muốn.

jQuery tương tác với HTML DOM để thao tác các phần tử HTML. Bài viết này cung cấp hướng dẫn quy trình để chuyển đổi dữ liệu JSON sang bảng HTML bằng JavaScript/jQuery

Dữ liệu JSON chuyển đổi thành Bảng HTML như thế nào?

Firstly, of all, a document form is created with tag, in which an HTML table is created with

tag. After that, a JavaScript library is imported to employ the built-in features of jQuery. Finally, the JSON data is converted to the formatted table in the HTML document using JavaScript/jQuery.

Để thực hành chức năng này, chúng tôi đã cung cấp một ví dụ chi tiết tại đây

Thí dụ

Để hiểu rõ hơn, mã ví dụ được chia thành bốn phần. Những khối này được gọi là một phần cụ thể. Hãy tìm hiểu sâu về chúng

Phần 1. Tạo bảng và chèn JavaScript/jQuery

An example to convert json data to html table using jquery

. //mã số. jquery. com/jquery-3. 6. 0. js"div>

tập lệnh >

trong mã

A table is created with

tag and various styles are added to it.

Finally, jQuery is imported in this section of code by tag to acquire the built-in functionality of JavaScript and jQuery.

Phần 2. Chèn phần tử vào List

$ [ hàm [] {
varmyList = [{ "Name": "Awais" , "Giáo dục". "BSCS" , "Vị trí". "Karachi"} ,
. "Name": "John" , "Giáo dục". "DPT" , "Vị trí". "Islamabad" } ,
. "Name": "Ali" , "Giáo dục". "B. Sc. " , "Vị trí". "Lahore" }]
htmlbảng [myList];}]

Mô tả của đoạn mã này được cung cấp dưới đây

Hàm được sử dụng để tìm nạp đối tượng JSON vào bảng HTML bằng cách chuyển myList làm đối số cho phương thức htmltable
Một danh sách “myList” được thêm vào để lưu trữ dữ liệu JSON
Trong danh sách này, Tên, Giáo dục và Vị trí được thêm làm tiêu đề. Hơn nữa, giá trị của các tiêu đề bảng này cũng được gán

Phần 3. Chèn các giá trị chính cho dữ liệu nối thêm trong bảng HTML

functionaddcols [ danh sách ] {
var col = [];
varhTr = $['

'];
for[vari =0; i

Dữ liệu JSON chuyển đổi thành Bảng HTML như thế nào?

Thí dụ

Phần 1. Tạo bảng và chèn JavaScript/jQuery

Phần 2. Chèn phần tử vào List

Phần 3. Chèn các giá trị chính cho dữ liệu nối thêm trong bảng HTML

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề