Question

我有csv文件的内容：标题1，heading2，heading3，heading4，heading5 value1_1，value2_1，value3_1，value4_1，value5_1 value1_2，value2_2，value3_2，value4_2，value5_2

我创建Javascript / HTML代码来获取该文件并显示内容

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

，输出如下： output

问题：如何将内容或数据转换为数组并显示为html表？

感谢您的帮助。

Answer 1

您可以将csv数据转换为数组，然后转换为html表。我已将\ n添加到您的新行中。当有新行时，请将\ n添加到您的代码中。

＆＃13;

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

＆＃13;

Answer 2

我发现Kapila Perera的回答非常有用。但是，由于使用slice(0,-1)，因此已裁剪了每一行的最后一个元素。在Perera的答案的基础上，在下面的示例中，我改用slice()。

我还将第一行lines[0]分隔为标头行，并从1循环（这并不总是csv包含标头，但在示例中被明确调用）。 / p>

最后，在输出被包装时，我添加了tbody标签，但这可能不是必需的。

    <script type="text/javascript"charset="utf-8">
        var div = document.getElementById('container');
        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;

        /* HEADERS */
        output.push("<tr><th>" 
            + lines[0].slice().split(",").join("</th><th>") 
            + "</th></tr>");

        for (i = 1; i < lines.length; i++)
            output.push("<tr><td>" 
                + lines[i].slice().split(",").join("</td><td>") 
                + "</td></tr>");

        output = "<table><tbody>" 
                    + output.join("") + "</tbody></table>";

        div.innerHTML = output;
    </script>

如何将CSV文件转换为HTML表格

2 个答案: