Avatar of JS List
JS List
Flag for United States of America

asked on 

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


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="http://www.w3.org/1999/xhtml" >
<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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?

Avatar of undefined
Last Comment
JS List

8/22/2022 - Mon