顯示一個csv數據到html表中時顯示結果爲false

Question

我在這裏有一個問題 我做了一個頁面，用於上傳一個csv文件，然後將它們顯示到一個html表格中。我使用簡單的excel庫來做到這一點。 我從csv文件得到正確的價值，但我不知道爲什麼。該值不會顯示爲html表格。我已經做出了這個方法，但我認爲這是行不通的。

有人請幫助我。錯誤顯示結果我的意思是這樣的 我給我顯示

這是我的HTML代碼和我的js的屏幕截圖稱他們

<script type="text/javascript"> 
 

 
      // check browser support 
 
      // console.log(SimpleExcel.isSupportedBrowser); 
 

 
      var fileInputCSV = document.getElementById('file'); 
 

 

 
      // when local file loaded 
 
      fileInputCSV.addEventListener('change', function (e) { 
 

 
       // parse as CSV 
 
       var file = e.target.files[0]; 
 
       var csvParser = new SimpleExcel.Parser.CSV(); 
 
       csvParser.setDelimiter(','); 
 
       csvParser.loadFile(file, function() { 
 

 
        // draw HTML table based on sheet data 
 
        var sheet = csvParser.getSheet(); 
 
        var table = document.getElementById('result'); 
 
        table.innerHTML = ""; 
 
        sheet.forEach(function (el, i) {      
 
         var row = document.createElement('tr'); 
 
         el.forEach(function (el, i) { 
 
          var cell = document.createElement('td'); 
 
          cell.innerHTML = el.value; 
 
          row.appendChild(cell); 
 
         }); 
 
         table.appendChild(row); 
 
        });      
 

 
       }); 
 
      }); 
 

 

 

 
     </script>

<div id ="bodi1" style="border:thick; width:100%; height:15%"> 
 
<form action="../php/tagihan/tagihan_input.php" id="select1" class="select1" name="select1" method="post" enctype="multipart/form-data"> 
 

 
<table width="50%" style="margin-left:40px"> 
 
<p align="center" style="margin-left: 10px"> <strong>Input Data Tagihan Vendor</strong> <br /><br /> 
 
    
 
    <tr> 
 
    <td width="120" style="border:none"><label style="float:left">Input File</label></td> 
 
    <td width="5" style="border:none"><label>:</label></td> 
 
    <td width="215" style="border:none"><input type="file" id="file" name="file" size="25" 
 
    title="Harap check kelengkapan file .csv"/> 
 
    </td> 
 
    <td width="150" style="border:none"> 
 
    <img src="../image/ok.png" class="button" name="ok" id="ok" style="height 
 
    :35px; width:40px" /> 
 
    <img src="../image/show.png" class="button" name="dir" id="dir" style="height:35px; width:40px" 
 
    onclick="up();" /> 
 
    <img src="../image/circle_close_delete_-128.png" class="button" name="close" id="close" 
 
    style="height:35px; width:40px"/> 
 
    </td> 
 
    </tr> 
 
    
 
</table> 
 
<table id="result"> 
 
<tr> 
 
</tr> 
 
<td> 
 
</td> 
 
</table> 
 
</form> 
 
</div>

這個CSV文件

Answer 1

我在這裏使用了Simple版Excel的js版本。

<script src="http://faisalman.github.io/simple-excel-js/src/simple-excel.js"></script> 

<div id="bodi1" style="border: thick; width: 100%; height: 15%"> 
    <input type="file" id="fileInputCSV"> 
    <table id="result"> 
    </table> 
</div> 

<script> 
     // check browser support 
     // console.log(SimpleExcel.isSupportedBrowser); 
     var fileInputCSV = document.getElementById('fileInputCSV'); 

     // when local file loaded 
     fileInputCSV.addEventListener('change', function (e) { 

      // parse as CSV 
      var file = e.target.files[0]; 
      var csvParser = new SimpleExcel.Parser.CSV(); 
      csvParser.setDelimiter(','); 
      csvParser.loadFile(file, function() { 

       // draw HTML table based on sheet data 
       var sheet = csvParser.getSheet(); 
       var table = document.getElementById('result'); 
       table.innerHTML = ""; 
       sheet.forEach(function (el, i) { 
        var row = document.createElement('tr'); 
        el.forEach(function (el, i) { 
         var cell = document.createElement('td'); 
         cell.innerHTML = el.value; 
         row.appendChild(cell); 
        }); 
        table.appendChild(row); 
       }); 
      }); 
     }); 
</script> 

請將這些代碼塊相應地安排在您的文件中。第二個腳本標籤應該作爲body標籤內的最後一個標籤。