HTMLテーブルにCSVファイルを変換する方法

-3

私は内容のCSVファイルがあります：見出し1、見出し2、見出し3、見出し4、見出し5 value1_1、value2_1、value3_1、value4_1、value5_1 value1_2、value2_2、value3_2、value4_2、value5_2HTMLテーブルにCSVファイルを変換する方法

を

私は、そのファイルをピックアップし、コンテンツ

<html> 
<head> 
<title>show csv</title> 
</head> 
<body> 
    <input type="file" id="fileinput" multiple /> 
    <div id="result"></div> 
    <script type="text/javascript"> 
     function readMultipleFiles(evt) { 
     //Retrieve all the files from the FileList object 
     var files = evt.target.files; 

     if (files) { 
      for (var i=0, f; f=files[i]; i++) { 
        var r = new FileReader(); 
       r.onload = (function(f) { 
        return function(e) { 
         var contents = e.target.result; 
         var res = document.getElementById("result"); 
         res.innerHTML = "Got the file<br>" 
           +"name: " + f.name + "<br>" 
           +"type: " + f.type + "<br>" 
           +"size: " + f.size + " bytes</br>" 
           + "starts with: " + contents; 
        }; 
       })(f); 

       r.readAsText(f); 
      } 
     } else { 
       alert("Failed to load files"); 
     } 
     } 

      document.getElementById('fileinput').addEventListener('change',readMultipleFiles, false); 
    </script> 
</body> 
</html>

を表示するにはJavascriptを/ HTMLコードを作成し、出力は以下のようである： output

質問：コンテンツやデータを配列に変換してhtmlテーブルとして表示するにはどうしたらいいですか？

ありがとうございました。

出典

2016-12-02 DPBS

あなたは私達にあなたのコードを示したが、問題は何ですか？ –

配列に値を取得するために必要なことは、次のとおりです： 'var ary = values.split（"、 "）;'そこから、あなたは値をループして何でもできます。 –

@PhilippSanderによって提供されるリンクのキーフレーズに注意してください：この質問はこの質問の良い塊に答えるので、 "検索と研究"：http://stackoverflow.com/q/7431268/215552 –

csvデータを配列に変換してからhtmlテーブルに変換することができます。あなたの新しい行に\ nを追加しました。改行がある場合は\ nをコードに追加してください。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <style> 
 
     table { 
 
     border-collapse: collapse; 
 
     border: 2px black solid; 
 
     font: 12px sans-serif; 
 
     } 
 
     td { 
 
     border: 1px black solid; 
 
     padding: 5px; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div id='container'></div> 
 
     <script type="text/javascript"charset="utf-8"> 
 
     var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2'; 
 
     var lines = data.split("\n"), 
 
     output = [], 
 
     i; 
 
     for (i = 0; i < lines.length; i++) 
 
     output.push("<tr><td>" 
 
     + lines[i].slice(0,-1).split(",").join("</td><td>") 
 
     + "</td></tr>"); 
 
     output = "<table>" + output.join("") + "</table>"; 
 
     var div = document.getElementById('container'); 
 
      
 
     div.innerHTML = output; 
 
     </script> 
 
    </body> 
 
</html>

出典

2016-12-02 16:29:07

HTMLテーブルにCSVファイルを変換する方法

答えて

関連する問題