How do I fill an HTML table using JavaScript?

Question

I need to create a table in HTML with 510 rows and 7 columns, and fill it with data. Is there an easy way to organize the data using JavaScript arrays, then fill the table using one or more functions? I'm trying to avoid editing the HTML source code every time one piece of data needs to be updated.

Answer 1

The real question here is: what is your data format and how often will you need to update? You mentioned rows and columns... is your data stored (and only stored) as HTML? If the data is in an HTML page, perhaps you should move it into a relational database format such as MySQL or MS Access. That way, all you would have to do is update your database and a server-side script (or whatever) could easily generate the HTML table for you on the fly (no need for JavaScript or AJAX or any client-side dependencies.)



Ask yourself, "why do I need a client-side solution?" If the problem is that you don't have access to a remote server that will allow you to do server-side programming:

1. Install a web server such as Apache or IIS on your local machine (if you haven't already)

2. Use the database and server-side scripts to generate your HTML table

3. View the built source in your browser and save the HTML



If you decide that you *need* a client-side solution, take a look at AJAX. If you want to keep it a JavaScript-only solution (since you mentioned something about using JavaScript arrays), take a look at JSON (JavaScript Object Notation.) You can use JSON as a light-weight and leaner alternative to XML to store your data.



For more information about JSON, check out these links:

http://json.org/

http://developer.yahoo.com/common/json.html

Answer 2

Yes, using Ajax in conjunction with JavaScript is the optimal solution.



To see examples of how HTML tables are generated dynamically check these two links out:

http://www.globalrph.com/davescripts/table.htm

http://www.oreillynet.com/pub/a/javascript/2003/05/06/dannygoodman.html



Hope this helps.

Answer 3

ajax!



the data comes from somewhere... but even if you type it into a file... ajax (and related technologies) can read the data and build a table on the fly! Much easier than editing html for every new line in a table!



Or... cgi (perl, php, asp, jsp...) , to generate the html from your data file.

Answer 4

Have you considered PHP