如何將.csv中的數據加載到數據表中？

我試圖使用this table來顯示包含從.csv文件加載的數據的表。如何將.csv中的數據加載到數據表中？

有沒有辦法將.csv中的數據加載到this table中，並且能夠應用條件格式？

謝謝！

以下代碼儘可能到目前爲止，表格主體<tbody>與表格分開。

<!DOCTYPE html> 
<html> 

    <head> 
    <meta http-equiv="refresh" content="1000"> 
    <!-- REFRESH EVERY 2 minutes --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="http://papaparse.com/resources/js/papaparse.js"></script> 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css"> 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css"> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script> 
    <style type="text/css"> 


    </style> 
    <title>HTML TABLE FROM .CSV DATA SOURCE</title> 
    </head> 

    <body> 
    <script> 


    //Setting data.csv as data source to be loaded into table id="example" 
     $(function() { 
     Papa.parse("data.csv", { 
      download: true, 
      complete: function(example) { 
      console.log("Remote file parsed!", example.data); 
      $.each(example.data, function(i, el) { 
       var row = $("<tr/>"); 
       row.append($("<td/>").text(i)); 
       $.each(el, function(j, cell) { 
       if (cell !== "") 
        row.append($("<td/>").text(cell)); 
       }); 
       $("#example tbody").append(row); 
      }); 
      } 
     }); 
     }); 

</script> 
<script type='text/javascript'> 
    //Conditionally formating. Where North office are red and South office are green 
    //<![CDATA[ 
    $(window).load(function() { 
    $('#example').dataTable({ 
     "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     switch (aData[0]) { 
      case 'North': 
      $(nRow).css('color', 'red') 
      break; 
      case 'South': 
      $(nRow).css('color', 'green') 
      break; 
     } 
     } 
    }); 
    }); //]]> 

</script> 


<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Extn.</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    </table> 
    </body> 

</html>

來源

2016-09-07 Dabbous

你必須以某種方式改變你.csv成陣列[[]]的陣列（表示列的陣列的每個元素），如在tutorial所示的頁面上給出的例子。配置對象的data鍵，您傳遞給數據表以具有此結構的值。

一個例子暴力破解轉換將是這個fiddle：

var csv="1,2,3\n4,5,6" 

function csvToArray(csv){ 

    return csv.split('\n').map(function(x){ 
     return x.split(','); 
}) 
}; 

console.log(csvToArray(csv));

爲了正確解析依靠解析庫。

來源

2016-09-10 14:07:03

如何將.csv中的數據加載到數據表中？

回答

相關問題