显示一个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标签内的最后一个标签。