Chào mừng bạn đến với một hướng dẫn về cách đọc tệp CSV và hiển thị nó trong bảng HTML với JavaScript. Bạn đã đọc đúng. JavaScript hiện đại thực sự có khả năng đọc các tệp CSV và trực tiếp xuất chúng. Không cần phía máy chủ. Đọc về các ví dụ!
Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.
Bạn Đang Xem: Hướng dẫn display csv file in html table – hiển thị tệp csv trong bảng html
Xem Tắt
TLDR – Slide nhanh
MỤC LỤC
Tải xuống & ghi chú
Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.
Ghi chú nhanh
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.
Ảnh chụp màn hình
Mã hóa ví dụ Tải xuống
Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.
Được rồi, bây giờ chúng ta hãy vào các ví dụ về việc đọc tệp CSV và hiển thị nó trong bảng HTML với JavaScript.
Tệp CSV giả
0-dummy.csv
Jo Doe,,465785
Joa Doe,,123456
Job Doe,,234567
Joe Doe,,345678
Jog Doe,,578456
Joh Doe,,378945
Joi Doe,,456789
Jon Doe,,987654
Jor Doe,,754642
Joy Doe,,124578Hãy để chúng tôi bắt đầu với một tệp CSV giả, danh sách người dùng giả. Đối với những người chưa quen với các giá trị phân tách của Comma Comma:
- Các tập tin CSV chỉ là văn bản đơn giản.
- Chúng tôi sử dụng các dòng phá vỡ
rnđể chỉ ra các hàng. - Chúng tôi sử dụng dấu phẩy
,để chỉ các cột. - Nếu ô chứa dấu phẩy, giá trị sẽ được đặt trong các trích dẫn. Ví dụ.
"Joy, Doe"
Ví dụ 1) Trình chọn tệp CSV đến bảng HTML
1a) HTML
1a-read-csv.html
<!-- (A) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
<!-- (B) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table><input type="file">Một trình chọn tệp chỉ giới hạn trong các tệp CSV.<table id="demoTable">Bảng trống để hiển thị nội dung CSV.
1b) JavaScript
1b-read-csv.js
// (A) FILE READER + HTML ELEMENTS
let reader = new FileReader(),
picker = document.getElementById("demoPick"),
table = document.getElementById("demoTable");
// (B) READ CSV ON FILE PICK
picker.onchange = () => reader.readAsText(picker.files[0]);
// (C) READ CSV & GENERATE TABLE
// CREDIT : https://thegermancoder.com/2018/11/29/how-to-parse-csv-with-javascript/
reader.onloadend = () => {
table.innerHTML = "";
let rows = reader.result.split("rn");
for (let row of rows) {
let cols = row.match(/(?:"([^"]*(?:""[^"]*)*)")|([^",]+)/g);
if (cols!=null) {
let tr = table.insertRow();
for (let col of cols) {
let td = tr.insertCell();
td.innerHTML = col.replace(/(^"|"$)/g, "");
}
}
}
};Đó là khá nhiều mã JavaScript, nhưng đây là một bản tóm tắt nhanh chóng.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>0 Chúng tôi sẽ sử dụng đối tượng đầu đọc tệp này để đọc tệp CSV đã chọn.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>1 Khi người dùng chọn tệp CSV, chúng tôi sẽ đọc nó dưới dạng văn bản đơn giản.
- Khi
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>2 được thực hiện, hãy đọc tệp CSV đã chọn.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>3 Chia dữ liệu thô thành các hàng theo dòng phá vỡ.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>4 Bước thêm mỗi hàng vào các cột.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>5 và
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>6 Tự giải thích thêm các hàng và cột vào bảng HTML.
-
Ví dụ 2) Ajax đọc tệp CSV
2a) HTML
2a-ajax-csv.html
<!-- (A) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>Đối với ví dụ này, chúng tôi chỉ cần một bảng trống.
2b) JavaScript
2b-ajax-csv.js
// (A) GET HTML TABLE
let table = document.getElementById("demoTable");
// (B) AJAX FETCH CSV FILE
fetch("0-dummy.csv")
.then(res => res.text())
.then(csv => {
// (B1) REMOVE OLD TABLE ROWS
table.innerHTML = "";
// (B2) GENERATE TABLE
let rows = csv.split("rn");
for (let row of rows) {
let cols = row.match(/(?:"([^"]*(?:""[^"]*)*)")|([^",]+)/g);
if (cols!=null) {
let tr = table.insertRow();
for (let col of cols) {
let td = tr.insertCell();
td.innerHTML = col.replace(/(^"|"$)/g, "");
}
}
}
});Xem Thêm : 5 lawyer nghĩa là gì hay nhất hiện nay
Không còn nữa, điều này là khá giống nhau.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>7 Nhận tệp CSV trên máy chủ.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>8 đọc CSV là văn bản đơn giản.
-
<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>9 Khá giống như trên. Chia chuỗi xuống thành các hàng/cột và tạo bảng HTML.
Một lưu ý về hiệu suất
Như bạn có thể thấy, chúng tôi đang đọc toàn bộ tệp CSV thành một chuỗi. Điều này hoạt động, nhưng bạn sẽ gặp phải các vấn đề về hiệu suất và các vấn đề về bộ nhớ với các tệp CSV lớn. Tại thời điểm viết, không có cách nào để đọc từng dòng tệp CSV, ít nhất là trong JavaScript phía máy khách. Vì vậy, chỉ cần nhận thức được điều này, và làm việc với nó một cách cẩn thận.
P.S. Nếu bạn đang sử dụng trình chọn tệp, bạn có thể nhận được kích thước tệp đã chọn với
// (A) FILE READER + HTML ELEMENTS
let reader = new FileReader(),
picker = document.getElementById("demoPick"),
table = document.getElementById("demoTable");
// (B) READ CSV ON FILE PICK
picker.onchange = () => reader.readAsText(picker.files[0]);
// (C) READ CSV & GENERATE TABLE
// CREDIT : https://thegermancoder.com/2018/11/29/how-to-parse-csv-with-javascript/
reader.onloadend = () => {
table.innerHTML = "";
let rows = reader.result.split("rn");
for (let row of rows) {
let cols = row.match(/(?:"([^"]*(?:""[^"]*)*)")|([^",]+)/g);
if (cols!=null) {
let tr = table.insertRow();
for (let col of cols) {
let td = tr.insertCell();
td.innerHTML = col.replace(/(^"|"$)/g, "");
}
}
}
};0.
Kiểm tra khả năng tương thích
- Chức năng mũi tên – Caniuse
- API đầu đọc tệp – Caniuse
- Tìm nạp – Caniuse
Những ví dụ này sẽ hoạt động tốt trong hầu hết các trình duyệt hiện đại.
Liên kết & Tài liệu tham khảo
- Cách phân tích CSV với JavaScript – lập trình viên Đức
- Hiển thị CSV dưới dạng bảng HTML trong PHP – mã Boxx
- JavaScript xuất mảng sang tệp CSV – mã Boxx
- JavaScript Read & Parse Tệp CSV (vào đối tượng Array) – Mã Boxx
Hướng dẫn YouTube
Infographics cheat tờ
Bảng CSV đến HTML trong JavaScript (bấm để phóng to)
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!
Làm cách nào để nhúng tệp CSV trong HTML?
Đầu tiên, tệp CSV, tức là tệp văn bản được phân tách bằng dấu phẩy, sẽ được đọc bằng API Filereader HTML5 dưới dạng chuỗi. Sau đó, chuỗi sẽ được phân tích cú pháp vào các hàng và cột và sẽ được hiển thị dưới dạng bảng HTML trên trang web trong trình duyệt. Đánh dấu HTML bao gồm một điều khiển tải FilePload (đầu vào tệp HTML) và nút HTML tức là tải lên.
Làm thế nào để bạn hiển thị dữ liệu trong một bảng trong HTML?
Chúng ta có thể tạo một bảng để hiển thị dữ liệu ở dạng bảng, sử dụng phần tử, với sự trợ giúp của, và các phần tử.Trong mỗi bảng, hàng bảng được xác định bởi thẻ, tiêu đề bảng được xác định bởi và dữ liệu bảng được xác định bởi các thẻ.using element, with the help of , , and
tag, table header is defined by
tags.
Làm cách nào để hiển thị tệp CSV trong bình HTML?
Trong bài viết này, chúng tôi sẽ chuyển đổi tệp CSV thành bảng HTML bằng cách sử dụng Python Pandas và Flask Framework .. Tệp CSV mẫu:. Bước 1: Tạo một môi trường….. Bước 2: Kích hoạt môi trường .. Bước 3: Cài đặt bình và gấu trúc .. Bước 1: Tạo thư mục ‘App.py’ và viết mã được đưa ra dưới đây ..
Làm cách nào để hiển thị dữ liệu trong tệp CSV?
Hiển thị hoạt động trên bài đăng này … Chuyển đến dữ liệu -> từ văn bản/CSV .. Chọn tệp CSV của bạn từ File Explorer .. Chọn Biến đổi dữ liệu .. Chọn tất cả các ô có Ctrl-A .. Nhấp vào Sử dụng hàng đầu tiên làm tiêu đề .. Nhấp vào DataType: Bất kỳ và chọn Văn bản và nhấp vào Thay thế hiện tại, nếu được nhắc .. Nhấp vào Đóng và tải ..
Tải thêm tài liệu liên quan đến bài viết Hướng dẫn display csv file in html table – hiển thị tệp csv trong bảng html
programming
html
CSV to HTML
Papaparse
Reply
8
0
Chia sẻ
Bài Viết Liên Quan
Hướng dẫn what is the role of html in web applications *? – vai trò của html trong các ứng dụng web là gì *?
Ngôn ngữ đánh dấu siêu văn bản, hoặc HTML, là ngôn ngữ lập trình được sử dụng để mô tả cấu trúc của thông tin trên trang web. Cùng nhau, HTML, CSS và …
programming
html
Hướng dẫn dùng inverse string python
Learn how to reverse a String in Python.Nội dung chínhExample ExplainedThe String to ReverseSlice the StringPrint the ListCreate a FunctionExample ExplainedCreate a FunctionSlice the StringReturn …
programming
python
Join reverse Python
Python range reverse
Lỗi chạy chương trình pascal
CÁC LỖI THƯỜNG GẶP TRONG QUÁ TRÌNH CHẠY CHƯƠNG TRÌNH PASCAL1 Invalid function number Sai số hiệu hàm 2 File not found Không tìm thấy file 3 Path not found Không tìm thấy …
programming
chương trình
Hướng dẫn how to get data between two string in php? – làm thế nào để lấy dữ liệu giữa hai chuỗi trong php?
Phần lớn các câu trả lời ở đây không trả lời phần đã được chỉnh sửa, tôi đoán chúng đã được thêm vào trước đó. Nó có thể được thực hiện …
programming
php
Xem ngày tốt làm nhà tháng 11 năm 2023
–>–>Chi tiết ngày xây dựng 9/11/2023Ngày tốt xây dựng tháng 11 năm 2023Ngày xấu xây dựng tháng 11 năm 2023Việc xem ngày tốt xây dựng, khởi công trước hết …
programming
2023
Hướng dẫn python call function with variable arguments – hàm gọi python với các đối số biến
Cách đơn giản nhất để bọc một hàm func(*args, **kwargs) … là viết thủ công một trình bao bọc sẽ gọi func () bên trong chính nó: def wrapper(*args, **kwargs): …
programming
python
Parameter list Python
Optional arguments Python
Parameters Python
Function argument
Hướng dẫn how do i remove an item from a list in python? – làm cách nào để xóa một mục khỏi danh sách trong python?
Trong Python, sử dụng các phương thức l = [0, 10, 20, 30, 40, 50] print(l.pop(0)) # 0 print(l) # [10, 20, 30, 40, 50] print(l.pop(3)) # 40 print(l) # [10, 20, 30, 50] 5 l = [0, 10, 20, …
programming
python
Remove list Python
List remove C#
Hướng dẫn dùng execcute trong PHP
Sử dụng pdo trong php trong php bài bài viết hướng dẫn bạn cách dùng thư viên PDO của php để thao tác với dữ liệu trong database.Nội dung chính1. Kết nối đến …
programming
php
Hướng dẫn dùng terraform maps python
Thứ hai, 28/09/2020 | 00:00 GMT+7 Nội dung chính Yêu cầu Hiểu cấu trúc của một dự án Terraform Cấu trúc đơn giản Cấu trúc phức tạp Bước 1 – Cài đặt dự án …
programming
python
Terraform
Terraform length
Terraform map variable
Học Terraform
Cài đặt Terraform
List in Terraform
Hướng dẫn dropdown bootstrap – sổ xuống bootstrap
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, … miễn phí cho tất cả mọi người. Là …
programming
bootstrap
Menu dropdown Bootstrap
Dropdown Bootstrap 5
Dropdown select Bootstrap
Học Bootstrap
Combobox Bootstrap
Dropdown w3school
Điểm chuẩn học viện hải quân 2023
Học Viện Hải Quân đã chính thức công bố điểm chuẩn năm 2021 theo phương thức xét tuyển kết quả thi tốt nghiệp THPT. Thông tin chi tiết điểm chuẩn năm nay …
programming
2023
Hướng dẫn excel split string by space – excel chia chuỗi theo khoảng trắng
Chia văn bản thành các cột khác nhau với trình hướng dẫn văn bản chuyển đổi thành các cột Excel cho Microsoft 365Excel cho WebExcel 2021Excel 2019Excel 2016Excel 2013Excel …
programming
excel
Excel split string
Remove in Excel
Excel split cell
Split Excel
Append text Excel
Hướng dẫn cỡ chữ trong html
Mời các bạn truy cập iZdesigner.comđể cập nhật những thông tin, thủ thuật mới nhất về Web-Designer.Hôm nay chúng ta sẽ tìm hiểu cách điều chỉnh Font …
programming
html
W3school HTML
Hướng dẫn ecommerce gallery bootstrap – thư viện thương mại điện tử bootstrap
Bootstrap 5 Plugin Gallery Gallery Gallery Bộ sưu tập thương mại điện tử đáp ứng được xây dựng với Bootstrap mới nhất 5. Tùy chỉnh với hiệu ứng thu phóng, …
programming
bootstrap
Mdbootstrap image
Bootstrap images
Dummy bootstrap
Parallax mirror bootstrap
Bootstrap 5 images
Hướng dẫn htmlspecialchars() function in php – hàm htmlspecialchars () trong php
Việc xử lý chuỗi trong PHP rất là quan trọng vì dữ liệu hiển thị trên trang web luôn luôn ở dạng chuỗi, vì thế nếu bạn nắm vững và xử lý nhuần nhuyễn …
programming
php
Htmlspecialchars
Htmlspecialchars trong PHP
Htmlspecialchars() là gì
Htmlentities
HTML decode PHP
Htmlspecialchars_decode
Hướng dẫn page border excel – viền trang excel
Trong Excel, khi bạn thực hiện nhập dữ liệu vào các ô thì mặc định bạn sẽ thấy có các đường kẻ bao quanh các ô tính đó.Tuy nhiên, Microsoft thiết kế các …
programming
excel
Hướng dẫn what is php parser – trình phân tích cú pháp php là gì
Home » Code » CodeNội dung chínhHướng dẫn convert string to int PHP hiệu quả nhất1. Syntax error trong PHP2. Fatal error trong PHP3. Warning error trong PHP4. Notice error trong …
programming
php
Hướng dẫn docker-php ini memory_limit – docker-php là memory_limit
Source code web bán hàng php mvc freeTài khoản: Email: Xu: (Xu)Nạp XU vào tài khoảnTHẺ ATM ONLINECHUYỂN KHOẢNVÍ VIETTEL / MOMO / NLINTERNET BANKINGVISA/ MASTER CARDNếu quý khách …
programming
php
Find php ini
Memory_limit php-fpm
Php ini
Memory_limit
Hướng dẫn count distinct mongodb – đếm mongodb riêng biệt
Tài liệu về nhà → Hướng dẫn sử dụng MongoDB → MongoDB Manual$countChuyển một tài liệu cho giai đoạn tiếp theo có chứa số lượng tài liệu nhập vào giai …
programming
mongodb
MongoDB count distinct
MongoDB project distinct
Find distinct MongoDB
Distinct MongoDB
Mongoose distinct count
Hướng dẫn get object by key javascript – lấy đối tượng bằng javascript khóa
Phương thức Object.keys() trả về một mảng của một tên thuộc tính có thể tìm thấy của một đối tượng nhất định, được lặp lại theo cùng một thứ tự …
programming
javascript
For…in object JavaScript
Loop object JavaScript
forEach object JavaScript
object.entries js
Quảng Cáo
Có thể bạn quan tâm
Hướng dẫn how do you make a video loop in html? – làm thế nào để bạn tạo một vòng lặp video trong html?
6 ngày trước
. bởi
nguyenbao_xinh
Code js trong trang html ở ví trí nào
6 ngày trước
. bởi
tran_luyenmoi
Hướng dẫn can you extract html code from website? – bạn có thể trích xuất mã html từ trang web không?
6 ngày trước
. bởi
Drdung_vt
Hướng dẫn display formatted xml in html textarea – hiển thị xml được định dạng trong html textarea
6 ngày trước
. bởi
nguyentung2021
Hướng dẫn is sql used in html? – sql có được sử dụng trong html không?
6 ngày trước
. bởi
mrhoai2021
Toplist được quan tâm
#1
Top 9 nhớ lời cha mẹ dạy remix tiktok 2022
4 ngày trước
#2
Top 3 kho đề thi tiếng anh lớp 7 2022
Xem Thêm : 4 bảng thông tin an toàn hóa chất tốt nhất, đừng bỏ lỡ
1 tuần trước
#3
Top 17 những lời cầu nguyện bằng tiếng anh 2022
5 ngày trước
#4
Top 9 điều 111 bộ luật hình sự 1999 2022
4 ngày trước
#5
Top 20 văn bản những phát minh tình cờ và bất ngờ thuật lại sự kiện gì theo trình từ nào 2022
3 ngày trước
#6
Top 9 tính tỉ lệ che phủ rừng so với diện tích đất liền 2022
2 ngày trước
#7
Top 19 cho khối chóp có thể tích v 14 2022
8 giờ trước
#8
Top 9 lý thuyết văn 9 tổng kết từ vựng 2022
6 ngày trước
#9
Top 16 soạn bài những câu hát về tình yêu quê hương, đất nước, con người 2022
3 ngày trước
Quảng cáo
Xem Nhiều
Học phí trường ischool nha trang 2023
6 ngày trước
. bởi
Kinh._top
Hướng dẫn not string in python – không phải chuỗi trong python
1 tuần trước
. bởi
mitnamtop
Phòng Giáo dục quận Bình Thủy tuyển dụng 2022
1 tuần trước
. bởi
bui_tungmoi
Dàn ý vợ chồng a phủ nhân vật mị
1 tuần trước
. bởi
nguyenduongmoi
Hướng dẫn cmp function c++ – hàm cmp c ++
6 ngày trước
. bởi
Missquyen_vt
Hướng dẫn python 3 multiline string with variables – chuỗi đa dòng python 3 với các biến
4 ngày trước
. bởi
Kinhhoai_bmt
Dont make your hair stand on end nghiaz là gì
5 ngày trước
. bởi
tranquyenhcm
Top 20 cửa hàng art 98 Huyện Lạc Sơn Hòa Bình 2022
3 ngày trước
. bởi
Kitung3
Hướng dẫn time shift python – trăn chuyển thời gian
5 ngày trước
. bởi
nguyenDang_top
Những răng sữa nào không thay
2 ngày trước
. bởi
nguyen.2021
Quảng cáo
Chủ đề
Hỏi Đáp
Bài Tập
Là gì
Toplist
Mẹo Hay
Địa Điểm Hay
Tiny Edu
programming
Nghĩa của từ
Công Nghệ
Top List
Khỏe Đẹp
Bao nhiêu
Tiếng anh
Sản phẩm tốt
Xây Đựng
Ngôn ngữ
Ở đâu
Hướng dẫn
Đại học
Tại sao
Bài tập
Dịch
Máy tính
So Sánh
Món Ngon
Bao lâu
Vì sao
Khoa Học
Thế nào
Lớp 9
Lớp 10
So sánh
Tiếng trung
Lớp 12
Lớp 11
Token Data
-
BOOBS
0x682f71fb … -
EDAC
0x692ee00c … -
ADoge
0x155f0dd0 … -
SANI
0x4521c9ad … -
SHI
0x7269d98a … -
FLOKI
0xcf0c122c … -
CRAMER
0x64df3aab … -
DARK
0x12fc0708 … -
SHI
0x243cacb4 … -
CHAMP
0x8f9e8e83 …
Quảng Cáo
Chúng tôi
- Giới thiệu
- Liên hệ
- Tuyển dụng
- Quảng cáo
Điều khoản
- Điều khoản hoạt động
- Điều kiện tham gia
- Quy định cookie
Trợ giúp
- Hướng dẫn
- Loại bỏ câu hỏi
- Liên hệ
Mạng xã hội
Bản quyền © 2021 Tiny Edu Inc.
Nguồn: https://quatangtiny.com
Danh mục: Blog
