如何使用 AJAX 和 Javascript 将多个 CSV 文件转换为多个 HTML 表答案

【问题标题】：How to convert multiple CSV file to Multiple HTML table using AJAX and Javascript如何使用 AJAX 和 Javascript 将多个 CSV 文件转换为多个 HTML 表
【发布时间】：2020-08-19 07:49:14
【问题描述】：

我有一个代码，它将显示在按钮单击时从 csv 文件生成的 HTML 表。但我希望通过单击一个按钮将多个 csv 文件转换为多个 HTML 表。有可能吗？

这是我的脚本。

$(document).ready(function(){
 $('#Load-Data').click(function(){
  $.ajax({
   url:"OutputNew.csv",
   dataType:"text",
   success:function(data){
    var employee_data = data.split(/\r?\n|\r/);
    var table_data = '<div class="dropdown"><button class="dropbtn">Download</button><div class="dropdown-content"><a href="javascript:createPDF()">Download PDF</a><a href="javascript:downloadInnerHtml()" id="downloadLink">Download HTML</a><a href="javascript:exportTableToExcel()">Download Excel</a></div></div><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."><div id="VMTable"><div id="content"><table id="myTable" class="table table-striped""><thead>';
    
    for(var count = 0; count<employee_data.length; count++) {
     var cell_data = employee_data[count].split(',');
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++){
      if(count === 0){
       table_data += '<th id="headers" style="position=sticky">'+cell_data[cell_count]+'</th>';
      }else{
          if(cell_data[cell_count] .includes("Not Matching")){
                var ret = cell_data[cell_count].replace('Not Matching','');
                if (ret == ""){
                    table_data += '<td>'+ret+'</td>'
                }else{
                  table_data += '<td data-color="green"><span>'+ret+'</span></td>';
                }
          }else if(cell_data[cell_count] .includes("Matching")){
                var ret = cell_data[cell_count].replace('Matching','');
                if (ret == ""){
                  table_data += '<td>'+ret+'</td>';
                }else if(ret == " "){
                  table_data += '<td>'+ret+'</td>';
                }else{
                  table_data += '<td data-color="green"><span class="badge-complete" style="color:Green">'+ret+'</span></td>';
                }
          }else{
              table_data += '<td>'+cell_data[cell_count]+'</td>';
          }
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table></div><iframe id="txtArea1" style="display:none"></iframe>';
    
    $('#employee_table').html(table_data);
   }
  });   
 }); 
});

这里是 HTML 按钮

<button type="button" name="Load-Data" id="Load-Data" class="btn btn-info">Generate Report</button>

【问题讨论】：

“将多个 csv 文件转换为多个 HTML 表格”是什么意思？您想多次使用相同的功能吗？你为什么不将你拥有的代码封装到一个函数中，并在你需要的任何时候运行它呢？
我试过了，但我希望所有 csv 文件都在同一页面中@Magnus
所有文件的列号或列号都相同吗？
你创造了很多其他的东西，比如按钮和下拉菜单。您想为每个 CSV 创建它们吗？什么是表数据和#employee_table？我们只是将表数据放在空的#employee 表中，所以将这些按钮和下拉列表放在空表标签中？？？？？？
OK 从这里得到我的问题答案：webslesson.info/2017/04/…

标签： javascript html ajax csv

【解决方案1】：

看看这个sn-p：

<!DOCTYPE html>
<html>
<head>
    <title>CSV Files to HTML Tables</title>
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   
    <script>
        //add your files to csv_files array
        var csv_files=['username.csv', 'username-password-recovery-code.csv']
        $(document).ready(function(){
            $('#btn_load').click(function(){
                for(var i=0; i<csv_files.length; i++)
                    $.ajax({
                        url: csv_files[i],
                        dataType:'text',
                        success:function(data){
                            var rows = data.split(/\r?\n|\r/);
                            var table = '<table border="1">';
                            //row - iteration

                            //print table header
                            var headings = rows[0].split(";")
                            table += '<thead><tr>';
                            for(var j=0; j<headings.length; j++)
                                table += '<th>' + headings[j] + '</th>';
                            table += '</tr></thead>';

                            //print table body
                            table += '<tbody>';
                            for(var j=1; j<rows.length; j++){
                                var data_cell = rows[j].split(";")
                                table += '<tr>';
                                for(var k=0; k<headings.length; k++)
                                    table += '<td>' + data_cell[k] + '</td>';
                                table += '</tr>';
                            }
                            table += '</tbody>';

                            //closing table, add line break, appending result to div
                            table += '</table><br>';
                            $('#div_results').append(table);
                        }
                    });   
            }); 
        });
    </script>
</head>
<body>
    <div id="div_results" style="border: 5px outset grey; padding: 10px;">
        <h2>--- Results ---</h2>
    </div>
    <button id="btn_load">Get External Content</button>
</body>
</html>

因为您还没有回答我的问题，所以我向您提供一个通用的解决方案。您可以使用此代码为任何没有任何没有的 CSV 生成 HTML 表。的列和行。为了您的方便，我添加了<thead> 和<tbody> 标签。如果您不想使用，则可以删除它们并进行任何进一步的样式特定更改。

【讨论】：