Jump to content

Csv To Html Table - Javascript


racheld
 Share

Recommended Posts

Please help!I am very, very new at the whole web development thing and need a bit of help with figuring out the simplest way to convert a basic csv file into an html table with a verticle scroll bar. Like with all things there is a catch, and that is my client will need to change the linked csv document on a regular basis so this process needs to be made as simple as possible.I found what seemed like fairly clean javascript code that claims to do what I want, but I can't seem to make it work. I tried to insert the " HTML Header data" and " HTML footer data" directly into the html code but that doesn't seem to work either.Below is both my js and html code. Any help solving this problem would be immensely appreciated!!!

//javascript// The names of our input and output filesvar src  = "toronto_Nov09.csv";var dest = "results.html";// Create some variablesvar fso, fin, fout;var data = new Array();// Define constants for file accessvar forReading   = 1;var forWriting   = 2;var forAppending = 8; // not used - given for reference// Create File System Object and open input and output filesfso  = new ActiveXObject( "Scripting.FileSystemObject" );fin  = fso.OpenTextFile( src, forReading );fout = fso.OpenTextFile( dest, forWriting, true );// create file if not found// Write out header and start of tablefout.WriteLine( htmlHeader() );fout.WriteLine( "<table border='0' cellpadding='1' cellspacing='0' width='100%'>" );// Loop through entire filewhile( !fin.AtEndOfStream ){ try  {  // Read the next line  var line = fin.ReadLine();    // If line if blank - skip it  if( line == "" )    continue;    // Fill our array 'data' which csv data split at ','  // If you are using a different seperator, such as a TAB  // you will need to modify the next item  // Some examples   // data = line.split( "\t" ); // for tab  // data = line.split( ":" );  // for colon  // data = line.split( " " );  // for space  data = line.split( "," );    // Start our table ROW  fout.WriteLine( "<tr>" );   // Loop through data elements found on current line  for( i = 0; i < data.length; i++ )  {    // write TD tags to wrap data   fout.WriteLine( "<td>" + data[i] + "</td>" );  }    // Close the ROW  fout.WriteLine( "</tr>\r\n" ); } catch( e ) {  WScript.Echo( "Error: " + e.description ); }}// Close TABLEfout.WriteLine( "</table>" );// Close HTML pagefout.WriteLine( htmlFooter() );// Close input and output filesfin.Close();fout.Close(); /******************************* HTML Header data********************************/function htmlHeader(){ var title = "CSV2HTML"; var head = "<html>\r\n<head>\r\n";  // Title head += "<title>" + title + "</title>\r\n";  // Style Sheet head += "<style>\r\n"; head += " TD { \r\n"; head += "    font-family: verdana;\r\n"; head += "    font-size: 10pt; \r\n"; head += "    border-bottom: thin groove lightyellow;\r\n"; head += "    border-top: thin groove lightyellow;\r\n"; head += "    color: blue; background: lightgrey;\r\n"; head += " }\r\n"; head += "</style>\r\n";  head += "</head>\r\n<body>\r\n"; return( head );}/******************************** HTML Footer data*********************************/function htmlFooter(){ var foot = "\r\n</body>\r\n</html>"; return( foot );}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><script type="text/javascript" src="csv2html.js"></script></head><body><!--<form id="commentForm" action="csvWithphp.php" method="post" onSubmit="return false;"></form>--><p>My csv conversion test</p></body></html>

Link to comment
Share on other sites

You can't use Javascript to do that, you'll either need to use PHP or ASP or something similar. I don't know if that Javascript would run or not, but if it did it would only run in IE and it would only act on a local file, so whoever looked at the page would need the CSV on their computer, and it would output an HTML page on their computer. Your form tag points to a PHP script so if you have that available you can use fgetcsv to read the file:http://us3.php.net/manual/en/function.fgetcsv.php

Link to comment
Share on other sites

You can't use Javascript to do that, you'll either need to use PHP or ASP or something similar. I don't know if that Javascript would run or not, but if it did it would only run in IE and it would only act on a local file, so whoever looked at the page would need the CSV on their computer, and it would output an HTML page on their computer. Your form tag points to a PHP script so if you have that available you can use fgetcsv to read the file:http://us3.php.net/manual/en/function.fgetcsv.php
Okay, thanks for your advice, I will try the php route. As for the form tag, that was a previous test that I forgot to delete before I uploaded my post...bad form on my part! Edited by racheld
Link to comment
Share on other sites

Okay, thanks for your advice, I will try the php route. As for the form tag, that was a previous test that I forgot to delete before I uploaded my post...bad form on my part!
I got the PHP to work so thanks for that! Now I am having trouble getting the php to display on the html page. I've used <form action="csvWithphp.php"></form>. Should I be using a get method here?THANKS!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...