alex wrote:
Hi,
I am looking for a way to populate an HTML table from an external
local text file which looks like this:
DATE/TIME LAT. LON. DEPTH. ML.
-------------------- ---------- ---------- ------- -------
21/03/2005-04:06:03 XX,XX XX,XX 171 3,42
21/03/2005-12:23:53 XX,XX XX,XX 500 5,4
21/03/2005-12:43:10 XX,XX XX,XX 553 5,38
21/03/2005-18:47:51 XX,XX XX,XX 162 3,91
21/03/2005-19:29:49 XX,XX XX,XX 500 3,51
21/03/2005-20:04:51 XX,XX X,X 75 3,72
The file could have more rows (DATA) that I show here. The file is
provided to me on a daily basis and I have to update a web page daily
with the contents of the file.
I considered using JavaScript embedded in the HTML page but I am a
newbie on what scripting for the web it refers.
How can I populate the HTML table with this text file which changes
everyday.
Also, is it possible to use php client-side only, without a server?
Your help, suggestions and feedback questions will be much
appreciated.
Thanks.
Alex.
Server-based preprocessors were designed for this sort of thing; any
time you attempt it at the client, you're in the wild-wild-west, so to
speak, hoping for a reasonably controlled environment (unlikely).
Nevertheless: you could simply download that text file into a hidden
iframe in the page and extract the data from there...browser support
for this - and DOM table-building - is pretty good these days. See if
this does anything. You may have to find any control characters
inserted by googlegroups and s & r them....sorry about that.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
font-size: 100%;
background: #9a9;
}
h3 {
width: 180px;
font: 18px "arial black";
color: #474;
margin: 80px auto 0 auto;
}
#stuff {
width: 600px;
margin: 10px auto;
}
#stuff th {
font: 11px "arial black";
color: #060;
letter-spacing: .4em;
border-left: 3px #000 solid;
border-right: 1px #000 solid;
background: #fff;
}
#stuff td {
font: normal 12px monospace;
text-align: center;
padding: 3px;
border-top: 1px #888 solid;
border-right: 1px #000 solid;
border-bottom: 1px #888 solid;
border-left: 3px #000 solid;
background: #d0d8d0;
}
#buffer {
display: none;
}
</style>
<script type="text/javascript">
onload = function()
{
if (!document.getE lementById
|| !document.getEl ementsByTagName )
return;
var frm = null,
prenode,
tbod = document.getEle mentById('tbod' ),
data = '';
if ((frm = top.frames['buffer']) //iframe
&& frm.document)
{ //get <pre> parent
prenode = frm.document.ge tElementsByTagN ame('pre').item (0);
if (null != prenode
&& null != prenode.firstCh ild
&& /#text/.test(prenode.f irstChild.nodeN ame)) //text node
{
data += prenode.firstCh ild.data; //read
data = data.split(/[\n\r]/); //separate lines
data.splice(0, 2); //lose first two (legend)
var i = 0,
l = data.length,
rowdata,
ii, ll, tr, td;
for (; i < l; ++i)
{
tr = document.create Element('tr'); //new row
tbod.appendChil d(tr);
rowdata = data[i].split(/\s{3,}/); //separate bits
for (ii = 0, ll = rowdata.length; ii < ll; ++ii)
{
td = document.create Element('td'); //new cell
td.appendChild( document.create TextNode(rowdat a[ii]));
tr.appendChild( td);
}
}
}
}
}
</script>
</head>
<body>
<h3>&#149 ; Mystery Data &#149;</h3>
<table id="stuff">
<thead>
<tr>
<th>DATE/TIME</th>
<th>LAT.</th>
<th>LON.</th>
<th>DEPTH.</th>
<th>ML.</th>
</tr>
</thead>
<tbody id="tbod">
</tbody>
</table>
<iframe id="buffer" name="buffer" src="data.txt"> </iframe>
</body>
</html>
Made some assumptions about the consistency of the text formatting.
