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

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?
LVL 2
JS ListAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

plusone3055Commented:
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

JS ListAuthor 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?
plusone3055Commented:
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
JS ListAuthor Commented:
I ended up making a program that can be installed.  Couldn't get the web version to work.
Thanks for your suggestions

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JS ListAuthor Commented:
Creating a web page didn't work.  So create software that would be installed on the machine.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.