Recently I was working on a web page that was overburdened with tabular data. The original goal was to database the information and just read/format the data with some server side code (PHP). The problem was that I had FTP access to the site but no administrative logins to setup and configure MySQL or another data store. This felt like a good time to experiment with another great extension to jQuery: $.csv() [http://plugins.jquery.com/project/csv ].

Drop the source code into an existing .js file or create a new one and make sure you link to it after you've loaded jQuery to the page. Now lets take a look at our HTML.

<h4>Select a year
<select id="year">
 <option>1900</option>
 <option>1910</option>
 <option>1920</option>
 <option>1930</option>
 </select>
</h4>

<table class="tableContent"> 
 <tr style="background-color:#516DB6; color: #fff;"> 
   <th>NAME</th><th>M/F</th><th>BORN</th><th>RESIDENCE AT HH</th> 
 </tr>
</table>

Now for the controls that will cause the update. You can see in the screen shot that we want to keep the update controls very simple. When a visitor changes the drop down list we want to take the new SELECT box value and search for that data.

Now that we have our HTML setup, lets start writing some javascript. We need to start by loading the CSV document on page load or once the document is ready. For this we can use the jQuery AJAX method $.get().

  $.get("documents/1900_Census.csv", function(data) { 
      array = $.csv() (data); 
      }); 

Now that we have our data in an Array, lets use jQuery to loop through each row.

  $.each(array, function() { 
          var row = String(this).split(",");
      }

The jQuery .each() function will setup each new row for our table. The line inside of this function splits the row into an array representing each column of data. We can later use those array elements to output our data.

Now that we can load the CSV data into our table. To clean things up a bit, lets put our code into a more complete function that will cause the table to fade out, load the data, then fade back in. Removing table rows with jQuery is simple, all we need to do is find every row but the first and call the .remove() method. Below you can see how we load the data once the document is ready and bind the change event of the drop down list.

 <script type="text/javascript">
  $(document).ready(function() {
     loadCSVFile(1900);
     $('#year').change(function() {
	loadCSVFile($('#year').val());
     });	
 });

function loadCSVFile(year)
{
  $('.tableContent').hide();
 
  $('#loading').fadeIn(); 
 
  $('.tableContent').find("tr:gt(0)").remove();
  $.get('documents/' + year + '_Census.csv', function(data) { 
      array = $.csv() (data); 
      $.each(array, function() { 
        var row = String(this).split(","); 
	if (row[0] != "") 
	{
          $('.tableContent').append("" + row[0] + "," + row[1] + "");
          $('.tableContent').append("" + row[2] + "" + row[3] + "" + row[4] + ""); 
	}
      }); 
  $('.tableContent tr:odd').css('background-color', '#ffc'); 
  $('.tableContent').fadeIn(); 
});
</script>

You can check out the final result here.