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

Question

我正在开发一个 Web 应用程序。我的应用程序使用 Javascript、PHP、HTML。我已经完成应用代码上传 xlsx 并将其附加到屏幕上。

这是我的代码

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

这是我的用户界面

我应该如何隐藏/删除空单元格(红色标记)？

Answer 1

您的 CSV 底部似乎有一个空行。即使是空的，对于“sheet”来说，只要有回车符，就只有一个字段。

在执行 el.forEach() 之前，我会检查“el”的内容是否包含任何内容