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

Question

I have a code which will show an HTML table generated from a csv file on button click.我有一个代码，它将在单击按钮时显示从 csv 文件生成的 HTML 表。 but i want multiple csv file to convert to multiple HTML table on a single button click.但我希望通过单击一个按钮将多个 csv 文件转换为多个 HTML 表。 Is it possible?可能吗？

So here is my script.所以这是我的脚本。

$(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);
   }
  });   
 }); 
});

and here is HTML button这是 HTML 按钮

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

Answer 1

Check out this snippet:看看这个片段：

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

Because you haven't answered my questions I am presenting you a generalized solution.因为您还没有回答我的问题，所以我向您提供一个通用的解决方案。 You can use this code to genereate HTML Tables for any no of CSVs having any no.您可以使用此代码为任何编号的 CSV 生成 HTML 表。 of columns and rows.列和行。 I have added <thead> and <tbody> tags for your ease.为了您的方便，我添加了<thead>和<tbody>标签。 If you not wana use than you can remove them and do any further style specific alterations.如果您不想使用，则可以删除它们并进行任何进一步的样式特定更改。

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

问题描述

1 个解决方案

解决方案1
1 2020-08-19 13:38:28

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

问题描述

1 个解决方案

解决方案1 1 2020-08-19 13:38:28

解决方案1
1 2020-08-19 13:38:28