R
RobG
Greg Scharlemann wrote:
Please don't top post. You appear to be using Google group's web
interface. To quote what you are replying to, don't use the 'reply'
link at the bottom of the post. Click the 'show options' link, then use
the 'reply' link at the top of the message.
The arrays are easier to work with than your carrot-delimited array. You
can also declare it this way:
var details = [];
details[0] = ['531245','129,900','3','3','1,720'];
details[1] = ['531246','130,900','3','3','1,800'];
details[2] = ['531246','150,100','3','2','1,910'];
details[3] = ['513195','124,500','4','3','1,528'];
details[4] = ['531245','129,900','3','3','1,720'];
details[5] = ['531246','130,900','3','3','1,800'];
details[6] = ['531246','150,100','3','2','1,910'];
details[7] = ['513195','124,500','4','3','1,528'];
As server-generated code, it should be no more difficult than your
original. 200 rows of the above is about 10kB, smaller than a small GIF.
I find it much simpler to read and play with than:
var dataArray = [
"531245129,9003^31,720531246^130,9003^31,800"
+ "^531246150,1003^21,910",
"513195124,5004^31,528"
];
The easiest way is to get IE to support 'hover' on elements other than A
and to use that. Ha ha...
An alternative is to put mouseover/out events on the tbody and handle
them - mouseover/outs from the TRs will bubble up:
<script type="text/javascript">
function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}
function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}
</script>
Inside the table:
<tbody id="catDetails" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">
Anyhow, here's a version that should fit the bill:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#catalogue
{border-collapse: collapse; border-top: 1px solid #999999;
border-left: 1px solid #999999;}
#catalogue td, #catalogue th
{text-align: right;border-bottom: 1px solid #999999;
border-right: 1px solid #999999;padding: 2px 5px 2px 5px;}
#catalogue th
{width: 4em;text-align: center;}
#catalogue th:first-child, #catalogue td:first-child
{width: 5em;text-align: left;padding: 0 0 0 5px;}
..clickable
{cursor: pointer; color: #2222ff;text-decoration: underline;}
#scriptLinks li
{display: inline;list-style-type: none;padding: 0 0 0 5px;}
..rowOn
{background-color: #e5e5e5;}
..rowOff
{background-color: #ffffff;}
</style>
<script type="text/javascript">
var details = [
['531245','129,900','3','3','1,720'],
['531246','130,900','3','3','1,800'],
['531246','150,100','3','2','1,910'],
['513195','124,500','4','3','1,528'],
['531245','129,900','3','3','1,720'],
['531246','130,900','3','3','1,800'],
['531246','150,100','3','2','1,910'],
['513195','124,500','4','3','1,528']
];
/*
* id is the id of the table body holding the rows
* dObj is the data array
* direction is:
* smaller than -1 for 'go to start',
* -1 for 'back one set'
* 1 for 'forward one set'
* bigger than 1 for 'go to end'
*/
function updateTable(id, dObj, direction)
{
if (!document.getElementById) return;
var tBod = document.getElementById(id);
var tRow, tRows = tBod.rows;
var rCount = tRows.length;
// Get the index of the first element to display
// using the id of the first row
var idx = tRows[0].id.split('-')[1];
if ( direction < -1 ) {
idx = 0;
} else if (direction > 1) {
idx = (dObj.length - rCount) || 0;
} else {
idx -= -rCount*direction;
}
// If there aren't any array values at that index,
// we've run out of data
if(!dObj[idx]) {
if (direction > 0) return false;
idx = 0;
}
// Update the row id with the new start index
tRows[0].id = tRows[0].id.split('-')[0] + '-' + idx;
// Update each cell in each row with data
var cell, c, i, j, k, x;
for (i=0; i<rCount; ++i){
tRow = tRows;
c=0;
for (j=0, k=tRow.childNodes.length; j<k; j++){
cell = tRow.childNodes[j];
if ('td' == cell.nodeName.toLowerCase()){
x = (dObj[idx]);
cell.innerHTML = (!x)? '-' : (0==c)? updateURL(x[c]) : x[c];
++c;
}
}
idx++;
}
return false;
}
function updateURL(x)
{
return '<a class="inlineActionLink" href="detailinfo.php?MlsNum='
+ x + '&nomap=true" title="Unable to locate on map">'
+ 'Details</a>';
}
function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}
function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}
</script>
</head>
<body>
<table id="catalogue">
<tbody id="catHead">
<tr>
<th> </th>
<th>Price</th><th>Beds</th><th>Baths</th><th>Size<br>(sq. ft)</th>
</tr>
</tbody>
<tbody id="catDetails" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">
<tr id="row-0">
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531245&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>129,900</td><td>3</td><td>3</td><td>1,720</td>
</tr><tr>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>130,900</td><td>3</td><td>3</td><td>1,800</td>
</tr><tr>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>150,100</td><td>3</td><td>2</td><td>1,910</td>
</tr>
</tbody>
</table>
<ul id="scriptLinks">
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-2);
">First</a>
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-1);
">Previous</a>
<li><a href="page1.html" onclick="
return updateTable('catDetails',details,1);
">Next</a>
<li><a href="page3.html" onclick="
return updateTable('catDetails',details,2);
">Last</a>
</ul>
</body>
</html>
Please don't top post. You appear to be using Google group's web
interface. To quote what you are replying to, don't use the 'reply'
link at the bottom of the post. Click the 'show options' link, then use
the 'reply' link at the top of the message.
I'm starting to lean more towards the tbody example. I don't like the
idea of two or three dimensional arrays (mainly for debugging purposes)
The arrays are easier to work with than your carrot-delimited array. You
can also declare it this way:
var details = [];
details[0] = ['531245','129,900','3','3','1,720'];
details[1] = ['531246','130,900','3','3','1,800'];
details[2] = ['531246','150,100','3','2','1,910'];
details[3] = ['513195','124,500','4','3','1,528'];
details[4] = ['531245','129,900','3','3','1,720'];
details[5] = ['531246','130,900','3','3','1,800'];
details[6] = ['531246','150,100','3','2','1,910'];
details[7] = ['513195','124,500','4','3','1,528'];
As server-generated code, it should be no more difficult than your
original. 200 rows of the above is about 10kB, smaller than a small GIF.
I find it much simpler to read and play with than:
var dataArray = [
"531245129,9003^31,720531246^130,9003^31,800"
+ "^531246150,1003^21,910",
"513195124,5004^31,528"
];
and including all of that html in the javascript function. If I do use
the tbody example that Rob outlined below, is there a way to duplicate
these two javascript statements that I had on each <tr> element?
onMouseOver="this.className='rowOn'"
onMouseOut="this.className='rowOff'"
The easiest way is to get IE to support 'hover' on elements other than A
and to use that. Ha ha...
An alternative is to put mouseover/out events on the tbody and handle
them - mouseover/outs from the TRs will bubble up:
<script type="text/javascript">
function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}
function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}
</script>
Inside the table:
<tbody id="catDetails" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">
Thanks for all the help...Greg
Anyhow, here's a version that should fit the bill:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#catalogue
{border-collapse: collapse; border-top: 1px solid #999999;
border-left: 1px solid #999999;}
#catalogue td, #catalogue th
{text-align: right;border-bottom: 1px solid #999999;
border-right: 1px solid #999999;padding: 2px 5px 2px 5px;}
#catalogue th
{width: 4em;text-align: center;}
#catalogue th:first-child, #catalogue td:first-child
{width: 5em;text-align: left;padding: 0 0 0 5px;}
..clickable
{cursor: pointer; color: #2222ff;text-decoration: underline;}
#scriptLinks li
{display: inline;list-style-type: none;padding: 0 0 0 5px;}
..rowOn
{background-color: #e5e5e5;}
..rowOff
{background-color: #ffffff;}
</style>
<script type="text/javascript">
var details = [
['531245','129,900','3','3','1,720'],
['531246','130,900','3','3','1,800'],
['531246','150,100','3','2','1,910'],
['513195','124,500','4','3','1,528'],
['531245','129,900','3','3','1,720'],
['531246','130,900','3','3','1,800'],
['531246','150,100','3','2','1,910'],
['513195','124,500','4','3','1,528']
];
/*
* id is the id of the table body holding the rows
* dObj is the data array
* direction is:
* smaller than -1 for 'go to start',
* -1 for 'back one set'
* 1 for 'forward one set'
* bigger than 1 for 'go to end'
*/
function updateTable(id, dObj, direction)
{
if (!document.getElementById) return;
var tBod = document.getElementById(id);
var tRow, tRows = tBod.rows;
var rCount = tRows.length;
// Get the index of the first element to display
// using the id of the first row
var idx = tRows[0].id.split('-')[1];
if ( direction < -1 ) {
idx = 0;
} else if (direction > 1) {
idx = (dObj.length - rCount) || 0;
} else {
idx -= -rCount*direction;
}
// If there aren't any array values at that index,
// we've run out of data
if(!dObj[idx]) {
if (direction > 0) return false;
idx = 0;
}
// Update the row id with the new start index
tRows[0].id = tRows[0].id.split('-')[0] + '-' + idx;
// Update each cell in each row with data
var cell, c, i, j, k, x;
for (i=0; i<rCount; ++i){
tRow = tRows;
c=0;
for (j=0, k=tRow.childNodes.length; j<k; j++){
cell = tRow.childNodes[j];
if ('td' == cell.nodeName.toLowerCase()){
x = (dObj[idx]);
cell.innerHTML = (!x)? '-' : (0==c)? updateURL(x[c]) : x[c];
++c;
}
}
idx++;
}
return false;
}
function updateURL(x)
{
return '<a class="inlineActionLink" href="detailinfo.php?MlsNum='
+ x + '&nomap=true" title="Unable to locate on map">'
+ 'Details</a>';
}
function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}
function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}
</script>
</head>
<body>
<table id="catalogue">
<tbody id="catHead">
<tr>
<th> </th>
<th>Price</th><th>Beds</th><th>Baths</th><th>Size<br>(sq. ft)</th>
</tr>
</tbody>
<tbody id="catDetails" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">
<tr id="row-0">
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531245&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>129,900</td><td>3</td><td>3</td><td>1,720</td>
</tr><tr>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>130,900</td><td>3</td><td>3</td><td>1,800</td>
</tr><tr>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>150,100</td><td>3</td><td>2</td><td>1,910</td>
</tr>
</tbody>
</table>
<ul id="scriptLinks">
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-2);
">First</a>
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-1);
">Previous</a>
<li><a href="page1.html" onclick="
return updateTable('catDetails',details,1);
">Next</a>
<li><a href="page3.html" onclick="
return updateTable('catDetails',details,2);
">Last</a>
</ul>
</body>
</html>