Как конвертировать CSV файл в HTML таблицу

-3

У меня есть CSV-файл с содержимым: Заголовок1, Заголовок 2, heading3, heading4, heading5 value1_1, value2_1, value3_1, value4_1, value5_1 value1_2, value2_2, value3_2, value4_2, value5_2Как конвертировать CSV файл в HTML таблицу

создать 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?

благодарит за любую помощь.

источник

2016-12-02 DPBS

вы показали нам свой код, но в чем проблема? прочитайте http://stackoverflow.com/help/how-to-ask –

Все, что вам нужно сделать, чтобы получить значения в массиве: '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

Как конвертировать CSV файл в HTML таблицу

ответ

Смежные вопросы