troubleshooting Question

Need HTML page that Retrieves Data from CSV and Displays in a table with NO Server Interaction

Avatar of JS List
JS ListFlag for United States of America asked on
5 Comments3 Solutions169 ViewsLast Modified:

I have to build a web page that the user can click on and it will display several rows of  3 text fields and 1 link field in a table.  The data is a csv file in the same folder.

Here's the catch the web page will be sitting in the users laptop and no connection to the internet or a server.  The links are to documents in the same folder.

Thought I could do this with JavaScript - and actually got the file read in.  But can't figure out how to display it in a table.  Plus I don't want the user to select the file.

Code below.
<!doctype html>
<html xmlns="" >
<meta charset="utf-8">
 <script language="javascript" type="text/javascript">
  function onloadpage() {
 <body onload="onloadpage();">
<form id="formname" name="formname" method="post" action="" >

<input type="file" name="file" id="file" accept=".csv">


<script language="javascript" type="text/javascript">
    document.getElementById('file').onchange = function () {
        var file = this.files[0];

        var reader = new FileReader();
        reader.onload = function (progressEvent) {
            // Entire file
            // By lines
            var lines = this.result.split('\n');
            for (var line = 0; line < lines.length; line++) {



 Then saw Tabular Data Control in IE.  Thought maybe this would work.  It's an Active X that comes with IE.  It's ok if the user has to click on using the Active X item.  But the code doesn't work.  Code below.

Tabular Data Control Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
     var dataSet = data1.recordset;
 <object id="data1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="dsotemplates" width="0" height="0">
<param name="DataURL" value="Templates.txt">
<param name="UseHeader" value="TRUE">
<param name="FieldDelim" value=",">

<table border="1" cellspacing="0" cellpadding="0" datasrc="#data1">

<tr style="background-color: #E7EFF7;"><th width="10%" class="textBold thinBorder spacerRow30" valign="top" align="center">Category</th>
<th width="15%" class="textBold thinBorder" valign="top" align="center">Type</th>
<th width="34%" class="textBold thinBorder" valign="top" align="center">Description</th>
<th width="34%" class="textBold thinBorder" valign="top" align="center">File</th>
<th width="7%" class="textBold thinBorder" valign="top" align="center">Published</th></tr>

<tbody> <tr>
<td><span datafld='category'> </span></td>
<td><span datafld='type'></span></td>
<td><span datafld='description'> </span></td>
<td><span datafld='file'> </span></td>
<td><span datafld='published'> </span></td>


I'd prefer the Tabular Data Control in IE but not sure if you have to be hooked up to a server.

Using IE 11 and windows 8.1

Any ideas?

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 3 Answers and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros