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表格

回答

相關問題