M
milkyway
Hello,
Just new to all of this. The code below is supposed to load an XML file
for use in a table. It doesn't work because of one command:
table.insertRow command:
I have seen the specs saying that it should be a -1 or the length of
the table. I have tried.
table.insertRow(-1) => error: Invalid Argument
table.insertRow(table.rows.length-1) => error: Invalid Argument
table.insertRow(0) => error: Invalid Argument
I have incorporated ALL of the code below because I am at the end of my
rope on this.
Thanks to ANYONE who will help me with this.
Regards.
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Table Samples</title>
<script>
function findTable(id)
{
id = "#" + id;
var tables = document.getElementsByTagName("table");
var i;
for (i=0; i < tables.length; i++) {
var table = tables;
if (table.getAttribute("datasrc") == id)
return table;
}
return null;
}
function addRowDOM (tableID) {
// pass every cell content as a futher arg
alert("here");
var table =
document.all ? document.all[tableID] :
document.getElementById(tableID);
alert("here 2");
if (arguments.length > 1) {
alert(table.rows.length);
var row = table.insertRow(table.rows.length-1);
alert("after var");
if (document.all) {
alert("second if");
for (var i = 1; i < arguments.length; i++) {
alert("in the for loop");
var cell = row.insertCell(i - 1);
cell.innerHTML = arguments;
}
}
else if (document.getElementById) {
alert("in else");
for (var i = arguments.length - 1; i >= 1; i--) {
var cell = row.insertCell(arguments.length - 1 - i);
cell.appendChild(document.createTextNode(arguments));
}
}
}
}
function getDataFieldNames(table)
{
var array = new Array();
var divs = table.getElementsByTagName("div");
var i;
for (i=0; i < divs.length; i++) {
var div = divs;
var datafld = div.getAttribute("datafld");
if (datafld != null && datafld != "") {
array = datafld;
}
}
if (array.length < 1) {
return null;
}
return array;
}
function getSrcFieldValues(xml, fieldNames)
{
var srcs = new Array();
var i;
for (i=0; i < fieldNames.length; i++) {
var field = fieldNames;
srcs[field] = xml.getElementsByTagName(field);
}
return srcs;
}
function fillTable(table, srcs)
{
var trtemplate =
table.firstChild.removeChild(table.firstChild.firstChild);
var tdtemplate = trtemplate.removeChild(trtemplate.firstChild);
while (trtemplate.firstChild) {
trtemplate.removeChild(trtemplate.firstChild);
}
table = table.firstChild;
var cols = 0;
for (field in srcs) {
srcs[cols++] = field;
}
var row;
for (row = 0; row < srcs[srcs[0]].length; row++) {
var tr = trtemplate.cloneNode(true);
var col;
for (col=0; col < cols; col++ ) {
var td = tdtemplate.cloneNode(true);
var div = td.firstChild;
div.setAttribute("datafld", srcs[col]);
var textNode =
document.createTextNode(srcs[srcs[col]][row].firstChild.nodeValue);
div.appendChild(textNode);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function loadTableData()
{
if (!document.all) {
var i;
var xmlNodes = document.getElementsByTagName("xml");
for (i=0; i< xmlNodes.length; i++) {
var xml = xmlNodes;
var id = xml.getAttribute("id");
var table = findTable(id);
var fields = getDataFieldNames(table);
var srcs = getSrcFieldValues(xml, fields);
fillTable(table, srcs);
}
}
}
function highlightRow (element, color1, color2) {
var chk = element.checked;
while (element.tagName.toUpperCase() != 'TR' && element != null)
element = document.all ? element.parentElement :
element.parentNode;
if (element && chk) {
element.bgColor = color1;
} else {
element.bgColor = color2;
}
}
</script>
</head>
<body onload="loadTableData();">
<xml id="xmldso_list">
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>
</xml>
<h1>Table Samples</h1>
<p>This sample shows how to mimic XML Data Islands in Mozilla with
tables. This sample
code is not meant for production use as it is very fragile as it stands
here (very
primitive browser capability test, requires certain template table
layout and so on).</p>
<h2>Names</h2>
<table border=1 bgcolor=yellow>
<tr align=left><th>Title: </th>
<td><input type=text></td></tr>
<tr align=left><th>Artist: </th>
<td><input type=text></td></tr>
<tr align=left><th>Year: </th>
<td><input type=text></td></tr>
<tr align=left><th>Country:</th>
<td><input type=text></td></tr>
<tr align=left><th>Company:</th>
<td><input type=text></td></tr>
<tr align=left><th>Price: </th>
<td><input type=text></td></tr>
</table>
<br>
<input type=BUTTON
ONCLICK="addRowDOM('table1','Check','MyTitle','MyArtist','MyYear',
'MyCountry','MyCompany','MyPrice')" value="Add" >
<br>
<br>
<table id="table1" datasrc="#xmldso_list" border=1>
<thead>
<tr align=left>
<th>Choice</th>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</thead>
<tr align=left><td><input type="checkbox" name="check" onclick
="highlightRow(this, 'yellow', 'transparent');" <div></td>
<td><div datafld="TITLE" /td>
<td><div datafld="ARTIST" /td>
<td><div datafld="COUNTRY" /td>
<td><div datafld="COMPANY" /td>
<td align=right><div datafld="PRICE" /td>
<td><div datafld="YEAR" /td>
</tr>
</table>
</body>
</html>
Just new to all of this. The code below is supposed to load an XML file
for use in a table. It doesn't work because of one command:
table.insertRow command:
I have seen the specs saying that it should be a -1 or the length of
the table. I have tried.
table.insertRow(-1) => error: Invalid Argument
table.insertRow(table.rows.length-1) => error: Invalid Argument
table.insertRow(0) => error: Invalid Argument
I have incorporated ALL of the code below because I am at the end of my
rope on this.
Thanks to ANYONE who will help me with this.
Regards.
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Table Samples</title>
<script>
function findTable(id)
{
id = "#" + id;
var tables = document.getElementsByTagName("table");
var i;
for (i=0; i < tables.length; i++) {
var table = tables;
if (table.getAttribute("datasrc") == id)
return table;
}
return null;
}
function addRowDOM (tableID) {
// pass every cell content as a futher arg
alert("here");
var table =
document.all ? document.all[tableID] :
document.getElementById(tableID);
alert("here 2");
if (arguments.length > 1) {
alert(table.rows.length);
var row = table.insertRow(table.rows.length-1);
alert("after var");
if (document.all) {
alert("second if");
for (var i = 1; i < arguments.length; i++) {
alert("in the for loop");
var cell = row.insertCell(i - 1);
cell.innerHTML = arguments;
}
}
else if (document.getElementById) {
alert("in else");
for (var i = arguments.length - 1; i >= 1; i--) {
var cell = row.insertCell(arguments.length - 1 - i);
cell.appendChild(document.createTextNode(arguments));
}
}
}
}
function getDataFieldNames(table)
{
var array = new Array();
var divs = table.getElementsByTagName("div");
var i;
for (i=0; i < divs.length; i++) {
var div = divs;
var datafld = div.getAttribute("datafld");
if (datafld != null && datafld != "") {
array = datafld;
}
}
if (array.length < 1) {
return null;
}
return array;
}
function getSrcFieldValues(xml, fieldNames)
{
var srcs = new Array();
var i;
for (i=0; i < fieldNames.length; i++) {
var field = fieldNames;
srcs[field] = xml.getElementsByTagName(field);
}
return srcs;
}
function fillTable(table, srcs)
{
var trtemplate =
table.firstChild.removeChild(table.firstChild.firstChild);
var tdtemplate = trtemplate.removeChild(trtemplate.firstChild);
while (trtemplate.firstChild) {
trtemplate.removeChild(trtemplate.firstChild);
}
table = table.firstChild;
var cols = 0;
for (field in srcs) {
srcs[cols++] = field;
}
var row;
for (row = 0; row < srcs[srcs[0]].length; row++) {
var tr = trtemplate.cloneNode(true);
var col;
for (col=0; col < cols; col++ ) {
var td = tdtemplate.cloneNode(true);
var div = td.firstChild;
div.setAttribute("datafld", srcs[col]);
var textNode =
document.createTextNode(srcs[srcs[col]][row].firstChild.nodeValue);
div.appendChild(textNode);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function loadTableData()
{
if (!document.all) {
var i;
var xmlNodes = document.getElementsByTagName("xml");
for (i=0; i< xmlNodes.length; i++) {
var xml = xmlNodes;
var id = xml.getAttribute("id");
var table = findTable(id);
var fields = getDataFieldNames(table);
var srcs = getSrcFieldValues(xml, fields);
fillTable(table, srcs);
}
}
}
function highlightRow (element, color1, color2) {
var chk = element.checked;
while (element.tagName.toUpperCase() != 'TR' && element != null)
element = document.all ? element.parentElement :
element.parentNode;
if (element && chk) {
element.bgColor = color1;
} else {
element.bgColor = color2;
}
}
</script>
</head>
<body onload="loadTableData();">
<xml id="xmldso_list">
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>
</xml>
<h1>Table Samples</h1>
<p>This sample shows how to mimic XML Data Islands in Mozilla with
tables. This sample
code is not meant for production use as it is very fragile as it stands
here (very
primitive browser capability test, requires certain template table
layout and so on).</p>
<h2>Names</h2>
<table border=1 bgcolor=yellow>
<tr align=left><th>Title: </th>
<td><input type=text></td></tr>
<tr align=left><th>Artist: </th>
<td><input type=text></td></tr>
<tr align=left><th>Year: </th>
<td><input type=text></td></tr>
<tr align=left><th>Country:</th>
<td><input type=text></td></tr>
<tr align=left><th>Company:</th>
<td><input type=text></td></tr>
<tr align=left><th>Price: </th>
<td><input type=text></td></tr>
</table>
<br>
<input type=BUTTON
ONCLICK="addRowDOM('table1','Check','MyTitle','MyArtist','MyYear',
'MyCountry','MyCompany','MyPrice')" value="Add" >
<br>
<br>
<table id="table1" datasrc="#xmldso_list" border=1>
<thead>
<tr align=left>
<th>Choice</th>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</thead>
<tr align=left><td><input type="checkbox" name="check" onclick
="highlightRow(this, 'yellow', 'transparent');" <div></td>
<td><div datafld="TITLE" /td>
<td><div datafld="ARTIST" /td>
<td><div datafld="COUNTRY" /td>
<td><div datafld="COMPANY" /td>
<td align=right><div datafld="PRICE" /td>
<td><div datafld="YEAR" /td>
</tr>
</table>
</body>
</html>