• Unfortunately, we have experienced significant hard drive damage that requires urgent maintenance and rebuilding. The forum will be a state of read only until we install our new drives and rebuild all the configurations needed. Please follow our Facebook page for updates, we will be back up shortly! (The forum could go offline at any given time due to the nature of the failed drives whilst awaiting the upgrades.) When you see an Incapsula error, you know we are in the process of migration.

[Release] CSV File to HTML Table Using AJAX jQuery

Joined
Apr 23, 2013
Messages
1,172
Reaction score
1,797
LukasCCB - [Release] CSV File to HTML Table Using AJAX jQuery - RaGEZONE Forums

LukasCCB - [Release] CSV File to HTML Table Using AJAX jQuery - RaGEZONE Forums


index.php
PHP:
<!DOCTYPE html><html> <head>  <title>CSV File to HTML Table Using AJAX jQuery</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>  <div class="container">   <div class="table-responsive">    <h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>    <br />    <div align="center">     <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>    </div>    <br />    <div id="employee_table">    </div>   </div>  </div> </body></html><script>$(document).ready(function(){ $('#load_data').click(function(){  $.ajax({   url:"Animation List.csv",   dataType:"text",   success:function(data)   {    var employee_data = data.split(/\r?\n|\r/);    var table_data = '<table class="table table-bordered table-striped">';    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>'+cell_data[cell_count]+'</th>';      }      else      {       table_data += '<td>'+cell_data[cell_count]+'</td>';      }     }     table_data += '</tr>';    }    table_data += '</table>';    $('#employee_table').html(table_data);   }  }); }); });</script>
 
Back
Top