以HTML格式顯示CSV文件

我在導入一個帶有標題的本地CSV文件到一個本地HTML文件中，然後該文件將在瀏覽器中顯示爲一個表格。以HTML格式顯示CSV文件

我沒有長時間學習HTML和JavaScript，所以我對導入和轉換了解不多。我需要的是一些建議，或者可能是描述我需要的功能的基本腳本。解釋和建議都歡迎！

這是CSV文件的一個例子：

heading1,heading2,heading3,heading4,heading5 
    value1_1,value1_2,value1_3,value1_4,value1_5 
    value2_1,value2_2,value2_3,value2_4,value2_5 
    value3_1,value3_2,value3_3,value3_4,value3_5 
    value4_1,value4_2,value4_3,value4_4,value4_5 
    value5_1,value5_2,value5_3,value5_4,value5_5

這是我怎麼會想顯示它：

http://jsfiddle.net/yekdkdLm

來源

2014-09-05 Roy Davies

與本地，你的意思是服務器上的CSV，對不對？ – davidkonrad 2014-09-05 11:04:20

不，我的意思是一個簡單的csv文本文件與html文件在同一個文件夾中，im仍然有點學習，但是我查看的所有地方都沒有真正解釋他們做了什麼或者如何訪問該數據 – 2014-09-05 11:08:43

[Here] （https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications）您可以找到從瀏覽器訪問本地文件的示例。您稍後需要編寫用於拆分和創建表格的代碼。 – szpic 2014-09-05 11:33:50

用PHP來打開和獲取值取一個外部文件中的代碼。

您必須爲此使用xmlHttpRequest。簡化使用jQuery（包括jQuery庫）爲。

您將需要運行在一個本地服務器，如Apache的HTML文件，瀏覽器 Chrome等犯規讓xmlHttp爲file://的URL。

$.ajax({ 
    type: "GET", 
    url: "words.txt", 
    dataType: "text", 
    success: parseTxt 
    });

使用一個成功的回調來處理數據

parseTxt是該文件的內容被讀出並passed功能。然後，您可以在parseTxt中編寫代碼以將文本處理爲字符串。

function parseTxt(text){ 
    var rows=text.split('\n'); 

    //for each row 
    //cols=rows[i].split(','); 
}

這應該足以讓你開始我猜。

How to read a text file from server using JavaScript?

你甚至可以嘗試使用iframes由Shadow Wizard回答上面的問題。

一個RAW XMLHttpRequest可以不jQuery的進行，如圖here

來源

2014-09-05 11:30:57 sabithpocker

啊，這看起來不錯，我得試試看 – 2014-09-05 12:23:30

我不認爲這是一個平凡解對此。堅持使用客戶端JavaScript使得這比在服務器端進行處理和簡單地提供HTML更困難。

您首先需要使用JavaScript從服務器獲取文件，最簡單的方法是使用jQuery庫。接下來，您需要獲取數據並在現有文檔中構建HTML，再次，jQuery將爲您簡化此操作。

如果你仍然在學習，我建議跳過第一位，並簡單地創建一個JavaScript變量，其中已有數據。通過這種方式，您可以編寫代碼來構建表，使其發揮作用，然後回過頭來擔心如何使用AJAX從服務器獲取該代碼。

另一種方法是，使用PHP等服務器端語言，在將數據傳遞到瀏覽器之前將數據合併到頁面中。不知道更多細節，這似乎是更合乎邏輯的解決方案。

來源

2014-09-05 11:18:06

啊，我看到了，難怪我找不到一個簡單的解決方案。這是所有這種類型的導入文件的情況嗎？ – 2014-09-05 11:23:48

這不是造成困難的文件類型。這是因爲CSV文件位於服務器上，但JavaScript將在本地計算機上運行。無論文件的格式如何，您都需要AJAX從服務器獲取文件。 – 2014-09-05 14:54:46

你需要使用JavaScript（jQuery的）或者PHP 這是在一個表中

<table> 
<tr> 
    <td>Header 1</td> 
    <td>Header 2</td> 
</tr> 
<?php 
    $fp = fopen ("file.csv" , "r"); 
    while (($data = fgetcsv ($fp , 1000 , ",")) !== FALSE) { 
     $i = 0; 
     echo "<tr>"; 
     foreach($data as $row) { 
      echo "<td>" . $row . "</td>"; 
      $i++ ; 
     } 
     echo "/<tr>"; 
    } 
    fclose ($fp); 
    ?> 
</table>

來源

2014-09-05 11:22:06 Javier

<div id="CSVTable"></div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//jquerycsvtotable.googlecode.com/files/jquery.csvToTable.js"></script> 

<script> 
$(function() { 
    $('#CSVTable').CSVToTable('your_csv.csv'); 
}); 
</script>

可以使用jquery.csvToTable.js在HTML中顯示CSV文件

來源

2014-09-05 11:31:18

您可以實現在顯示CSV數據html使用d3.js

這裏最簡單的例子： http://bl.ocks.org/ndarville/7075823

來源

2017-03-23 05:20:16

以HTML格式顯示CSV文件

回答

相關問題