Problem:
What can you do here? You can write an importer to a database, or let the customer upload the excel file on a webserver and write a parser for the excel files etc. These are all non-trivial solutions for the problem that you want to easily display your information from the csv on a webpage into a table.

Solution:
I found a plugin called jquery csv2table. This is very simple to use. A CSV-file will be read asynchrounosly and a HTML-table will be created of it. So you can simply let your customer load his csv file up and the table will be created automatically. Optional support of sorting, highlighting etc. Link: http://plugins.jquery.com/project/csv2table

Example:

1
2
3
4
5
6

<div id="view1"></div>
<script type="text/javascript">
$(function(){
    $('#view1').csv2table('./data/Book12.csv');
});
</script>

This code will load the data from Book12.csv into the div “view1″.

There are many Javascript libraries on the market, e.g. script.aculo.us, jquery, dojo, Prototype and so on. For most of the tasks there is no special reason why jquery. It ist mostly a matter of actual knowledge of the developers to keep learning time low when there is a basic knowledge available. Some JS-libs have an easier handling e.g. of json than other, in detail using json in jquery is simpler than in prototype.

Why should you use a js-lib at all? There are several reasons:

Simpler syntax and less code

Imagine you want to modify every div-element which has class “payment” assigned and want to set the background color to “#cccccc” to these elements.
You have something like this:

1
2
3
4
5
6

<div id="list">
  <div class="payment">some text</div>
  <div>some text</div>
  <div class="payment">some text</div>
  <div class="payment">some text</div>
</div>

With normal JS you could do the job like this:

1
2
3
4
5
6

var list = document.getElementById('list');
for (var i = 0; i < list.childNodes.length; i++) {
    if (list.childNodes.item(i).className == "payment") {
    	list.childNodes.item(i).style.backgroundColor = '#cccccc';
    }
}

Ok, six lines of code and moderate readable but what with all browser support? Umpf. And imagine this is a simple example.

With jquery you do:

1

$('div.payment').css('background-color' , '#cccccc');

And this runs in all browsers.

Better readability

Isn’t the example above better readable? You use css-selectors for selecting elements in javascript.

E.g. you want to remove the class from the div elements which are childs of the div with id “list”.

1
2
3

$('div#list div.payment').each(function() {
	$(this).removeClass('payment');
})

Better and easier extendability

You can simply create own plugins.

Multi-Browser compatibility

Nearly all functions will run in every browser.

There are often some cons why you should not use js-libs:

Big libray included

Yes it can be but e.g. with jquery you can use the compressed version for the live version. This will have only round about ~50k. And browser will cache the js file.

Higher loading times

Travering can be a costy thing, true. But with newer version it will become faster.

Conclusion

So I recommend using jquery because of the better readability, extendability and the separation of concerns.

Tip of the day:

Do not put JS-code inside html document when not needed. Use event-handling in outsourced js-file.

More infos about jquery you can find under http://www.javascriptkata.com/2007/05/29/3-reasons-why-i-use-jquery/