Hướng dẫn how do i display a csv file in html table? - làm cách nào để hiển thị tệp csv trong bảng html?

Đặt mọi thứ lại với nhau

Đây là cách bạn có thể đặt mọi thứ lại với nhau:

Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách nhập tệp CSV vào bảng HTML bằng API tệp JavaScript và HTML5.

Đầ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ị trong bảng HTML.

Nhập tệp CSV vào bảng HTML bằng JavaScript

Đá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.

Khi nút được nhấp, chức năng tải lên JavaScript được gọi.

Bên trong chức năng, đầu tiên một kiểm tra được thực hiện để xác minh xem tệp là CSV hoặc tệp văn bản hợp lệ. Sau đó, kiểm tra được thực hiện để đảm bảo liệu trình duyệt có hỗ trợ API tệp HTML5 hay không.

Khi các kiểm tra trên được xóa thì nội dung của tệp CSV được đọc dưới dạng chuỗi văn bản và sau đó chuỗi được chia thành các phần bằng dấu phẩy và các ký tự dòng mới và cuối cùng được hiển thị dưới dạng bảng HTML.

<script type="text/javascript">

& nbsp; & nbsp; & nbsp; chức năng tải lên () {function Upload() {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var fileupload = document.getEuityById ("fileupload");var fileUpload = document.getElementById("fileUpload");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var regex = /^(wasta-za-z0-9\s_\\.\ -: [)+(.csv|.txt)$/;var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if (regex.test (fileupload.value.toleowercase ())) {if (regex.test(fileUpload.value.toLowerCase())) {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if (typeof (filereader)! = "không xác định")if (typeof (FileReader) != "undefined") {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var reader = new filereader ();var reader = new FileReader();

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; reader.onload = function (e) {function (e) {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var bảng = document.createelement ("bảng");var table = document.createElement("table");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var hàng = e.target.result.split ("\ n");var rows = e.target.result.split("\n");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; for (var i = 0; i for (var i = 0; i < rows.length; i++) {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; các tế bào var = hàng [i] .split (",");var cells = rows[i].split(",");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if (cells.length> 1) {if (cells.length > 1) {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var row = bảng.Insertrow (-1);var row = table.insertRow(-1);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;for (var j = 0; j < cells.length; j++) {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var cell = row.insertCell (-1);var cell = row.insertCell(-1);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cell.innerhtml = tế bào [j];

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var dvcsv = document.getEuityById ("dvcsv");var dvCSV = document.getElementById("dvCSV");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; dvcsv.innerhtml = "";"";

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; DVCSV.AppendChild (Bảng);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; reader.readastext (fileupload.files [0]);

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;"This browser does not support HTML5.");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cảnh báo ("Vui lòng tải lên tệp CSV hợp lệ.");"Please upload a valid CSV file.");

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }

& nbsp; & nbsp; & nbsp; }

script>

<input type="file" id="fileUpload" />

<input type="button" id="upload" value="Upload" onclick="Upload()" />

<hr />

<div id="dvCSV">

div>

Ảnh chụp màn hình

Nội dung của tệp CSV được đặt trên thư mục người dùng

Tệp CSV được hiển thị trong Trình duyệt dưới dạng bảng HTML

tính tương thích của trình duyệt web

Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.

* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ.

Tải xuống

Tải xuống API Word/PDF/Excel miễn phí

Làm thế nào bao gồm 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 để định dạng tệp CSV vào bảng?

Tôi có thể chuyển đổi CSV thành HTML không?

$.ajax({
    type: "GET",
    url: "data.csv",
    success: CSVToHTMLTable
});

var data = Papa.parse(data).data;

function arrayToTable(tableData) {
    var table = $('');
    $(tableData).each(function (i, rowData) {
        var row = $('

Reply 3 0 Chia sẻ