HTML 테이블에 CSV 파일을 변환하는 방법을

-3

난 내용에 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_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>

에게 해당 파일을 선택하고 표시하기 위해 자바 스크립트/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

HTML 테이블에 CSV 파일을 변환하는 방법을

답변

관련 문제