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

JS List
JS List used Ask the Experts™
on
Hello,

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" >
<head>
<meta charset="utf-8">
 <script language="javascript" type="text/javascript">
  function onloadpage() {
         document.formname.reset()
      }
</script>
          
   <title>AgDocsJS</title>
  </head>
 <body onload="onloadpage();">
 
<form id="formname" name="formname" method="post" action="" >

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

</form>

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

        var reader = new FileReader();
        reader.onload = function (progressEvent) {
            // Entire file
            console.log(this.result);
            //document.writeln(this.result);
            // By lines
            var lines = this.result.split('\n');
            for (var line = 0; line < lines.length; line++) {
                console.log(lines[line]);
                document.write('"<br>"');
                document.writeln(lines[line]);

            }
        };
        reader.readAsText(file);

    };
</script>
</body>
 </html>



 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.
http://www.sitepoint.com/control-internet-explorer/
https://msdn.microsoft.com/en-us/library/ms531386(v=vs.85).aspx


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" >
<head>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
     var dataSet = data1.recordset;
     dataSet.moveNext();  
</script>  
 </head>
 
 <body>
 <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=",">
</object>

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

<thead>
<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>
</thead>

<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>
</tbody>

</table>


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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I'm trying to wrap my head around a web page that is not connected to the internet

(so a straight up HTML file that they are clicking on ??)

I found/ tested a tutorial that does accomplish what you are looking for without a server, Jquery or the user having to select a file. I assume that the file will always be in the same place and will never change names ?

This code comes from the following tutorial

http://bl.ocks.org/ndarville/7075823


 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            table {
                border-collapse: collapse;
                border: 2px black solid;
                font: 12px sans-serif;
            }

            td {
                border: 1px black solid;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
        <script src="d3.min.js?v=3.2.8"></script>

        <script type="text/javascript"charset="utf-8">
            d3.text("data.csv", function(data) {
                var parsedCSV = d3.csv.parseRows(data);

                var container = d3.select("body")
                    .append("table")

                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")

                    .selectAll("td")
                        .data(function(d) { return d; }).enter()
                        .append("td")
                        .text(function(d) { return d; });
            });
        </script>
    </body>
</html>

Open in new window

Author

Commented:
I must be a numskull it's not working.

YES!  (I know I know)  "THEY" want it to be an html page on their laptop.  The page will contain links to documents in the same folder.

I downloaded the latest d3 from here: https://github.com/mbostock/d3/releases  (V3.5.16)
Tried
<script src="d3.min.js?v=3.2.8"></script>  and
<script src="d3.min.js?v=3.5.16"></script>
Installed it in the same folder as html

Created the data.csv file -> in same folder as html

Here's the code I'm using
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    table {
	border-collapse: collapse;
	border: 2px black solid;
	font: 12px sans-serif;
    }

    td {
	border: 1px black solid;
	padding: 5px;
    }
</style>
</head>
<body>
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
<script src="d3.min.js?v=3.5.16"></script>

<script type="text/javascript"charset="utf-8">
    d3.text("data.csv", function(data) {
	var parsedCSV = d3.csv.parseRows(data);

	var container = d3.select("body")
	    .append("table")

	    .selectAll("tr")
		.data(parsedCSV).enter()
		.append("tr")

	    .selectAll("td")
		.data(function(d) { return d; }).enter()
		.append("td")
		.text(function(d) { return d; });
	    });
	</script>
    </body>
</html>

Open in new window


I'm opening IE and typing in the location C:\testfolder\test.html  -> click ok to Allow Active X scripts running on the web page Allow Blocked Content

And comes up blank.

Any ideas?
interesting That one worked for me..

There is another one out there that has a Jquery Plug in

try this one out :)

http://www.jqueryscript.net/table/jQuery-Plugin-To-Generate-A-Table-From-A-CSV-File-CSV-Parser.html
Commented:
I ended up making a program that can be installed.  Couldn't get the web version to work.
Thanks for your suggestions

Author

Commented:
Creating a web page didn't work.  So create software that would be installed on the machine.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial