CSV上传并使用JQUERY将其解析为HTML表格

我正在开发一个web应用程序。我的应用程序正在使用Javascript，PHP，HTML。我已经完成了上传xlsx的代码，将它附加在屏幕上。CSV上传并使用JQUERY将其解析为HTML表格

这里是我的代码

<script type="text/javascript" src="simple-excel.js"></script> 
<table width=50% align="left" border=0 STYLE="border-collapse:collapse;"> 
     <tr> 
      <td style="width:9.2%"><b>Load CSV file</b></td> 
      <td style="width:1%"><b>:</b></td> 
      <td style="width:15%"><input type="file" id="fileInputCSV" /></td> 
     </tr> 
    </table> 
<table id="result"></table> 

     <script type="text/javascript"> 

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

这里是我的UI

如何我应该为隐藏办/擦除空细胞（红色标记）？

来源

2016-05-20 Shieryn

-1

把一些条件内el.forEach

像这样

el.forEach(function (el, i) { 
          if(el.value!="") 
          { 
           var cell = document.createElement('td'); 
           cell.innerHTML = el.value; 
           row.appendChild(cell); 
          } 
         });

来源

2016-05-20 17:11:02 Shieryn

之前验证el是否有多个列/元素真的吗？天哪，你是怎么想出来的？ – slambeth

@slambeth是的。我只是一直尝试：D无论如何谢谢你：D – Shieryn

看起来你的CSV在底部有一条空行。即使它是空的，就“表格”而言，只要有回车，它就会有一个字段。

我会检查，看看是否在“厄尔尼诺”的内容包含执行你的el.forEach（）之前任何

来源

2016-05-20 16:55:49 slambeth

我已经删除了我的csv文件中的最后一行。它总是这样。那么，你有其他解决方案吗？谢谢 – Shieryn

不管怎么样，当你不需要的时候，你会同时追加一个tr和一个td。我会建议你应该检查el的内容，并且可能在你输入forEach – slambeth

CSV上传并使用JQUERY将其解析为HTML表格

回答

相关问题