Hướng dẫn csv to html table - bảng csv sang html

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ụ!

Nội dung chính ShowShow

• TLDR - Slide nhanh
• MỤC LỤC
• Tải xuống & ghi chú
• Ghi chú nhanh
• Ảnh chụp màn hình
• Mã hóa ví dụ Tải xuống
• Tệp CSV giả
• Ví dụ 1] Trình chọn tệp CSV đến bảng HTML
• Ví dụ 2] Ajax đọc tệp CSV
• Một lưu ý về hiệu suất
• Kiểm tra khả năng tương thích
• Liên kết & Tài liệu tham khảo
• Hướng dẫn YouTube
• Infographics cheat tờ
• KẾT THÚC
• Làm cách nào để nhúng tệp CSV trong HTML?
• Làm thế nào để bạn hiển thị dữ liệu trong một bảng trong HTML?
• Làm cách nào để hiển thị tệp CSV trong bình HTML?
• Làm cách nào để hiển thị dữ liệu trong tệp CSV?

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.

TLDR - Slide nhanh

MỤC LỤC

Tải xuống & ghi chú

Ghi chú nhanh

Ghi chú nhanh

Ảnh chụp màn hình

Ảnh chụp màn hình

Mã hóa ví dụ Tải xuống

Tệp CSV giả

Ví dụ 1] Trình chọn tệp CSV đến bảng HTML

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,,124578

Ví dụ 1] Trình chọn tệp CSV đến bảng HTML

• Ví dụ 2] Ajax đọc tệp CSV
• Một lưu ý về hiệu suất
• Kiểm tra khả năng tương thích
• Liên kết & Tài liệu tham khảo

Ví dụ 1] Trình chọn tệp CSV đến bảng HTML

Ví dụ 2] Ajax đọc tệp CSV

1a-read-csv.html

• Một lưu ý về hiệu suất
• Kiểm tra khả năng tương thích

Liên kết & Tài liệu tham khảo

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 : //thegermancoder.com/2018/11/29/how-to-parse-csv-with-javascript/
reader.onloadend = [] => {
  table.innerHTML = "";
  let rows = reader.result.split["\r\n"];
  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, ""];
      }
    }
  }
};

Hướng dẫn YouTube

1. Infographics cheat tờ
2. KẾT THÚC
3. Làm cách nào để nhúng tệp CSV trong HTML?
   • Làm thế nào để bạn hiển thị dữ liệu trong một bảng trong HTML?
   • Làm cách nào để hiển thị tệp CSV trong bình HTML?
   • Làm cách nào để hiển thị dữ liệu trong tệp CSV?

Ví dụ 2] Ajax đọc tệp CSV

Một lưu ý về hiệu suất

2a-ajax-csv.html

Kiểm tra khả năng tương thích

Liên kết & Tài liệu tham khảo

2b-ajax-csv.js

Hướng dẫn YouTube

• Infographics cheat tờ
• KẾT THÚC
• Làm cách nào để nhúng tệp CSV trong HTML?

Một lưu ý về hiệu suất

Kiểm tra khả năng tương thích

Liên kết & Tài liệu tham khảo

// [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 : //thegermancoder.com/2018/11/29/how-to-parse-csv-with-javascript/
reader.onloadend = [] => {
  table.innerHTML = "";
  let rows = reader.result.split["\r\n"];
  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, ""];
      }
    }
  }
};

Kiểm tra khả năng tương thích

• Liên kết & Tài liệu tham khảo
• Hướng dẫn YouTube
• Infographics cheat tờ

KẾT THÚC

Liên kết & Tài liệu tham khảo

• Hướng dẫn YouTube
• Infographics cheat tờ
• KẾT THÚC
• Làm cách nào để nhúng tệp CSV trong HTML?

Hướng dẫn YouTube

Infographics cheat tờ

KẾT THÚC

Làm cách nào để nhúng tệp CSV trong HTML?