That should be simple. BTW, in case you're interested in more about the differences between version 5 and version 4 events, see:
http://www.dynamicdrive.com/forums/e...rsion-5-Events
As to an alert, I question whether that's such a great idea. It would be disruptive to have that going off all the time - each time you change the highlighted row. I wiuld think that it might be better to have an element on the page that would show the current row number. But getting the number would be the same in either case. It's actually much simpler without the alert though, that is if with the alert you want the highlight to change first before the alert fires (additions, changes highlighted):
Code:
function highlightRow(gethighlight) { //now dual use - either set or get the highlighted row
gethighlight = gethighlight === true;
var t = trows.length;
while (--t > -1) {
trow = trows[t];
if(gethighlight && trow.className === 'highlighted'){return t;}
else if (!gethighlight){
if(trow !== this) { trow.className = 'normal'; }
else if(this.className === 'normal') {
(function(t){
alertfunc = function(){
alert('You are now on row #' + t);
};
})(t);
setTimeout(alertfunc, 0);
}
}
}//end while
return gethighlight? null : this.className = this.className === 'highlighted'? 'normal' : 'highlighted';
}//end function
And you should add a var declaration at the beginning (fine point, but we're trying to keep everything local to at least the outer function wrap):
Code:
<script type="text/javascript">
(function() {
var trows = document.getElementById('mstrTable').rows, t = trows.length, trow, nextrow, alertfunc,
addEvent = (function(){return w . . .
All that convoluted coding with the timeout and the function being created in an anonymous function within the while loop is to preserve the value of t at the time it's discovered for execution later, after the highlight has actually changed. There's no alert for when there's no row selected, nut that could be added.
If on the other hand we were to add a text input at the beginning of the table:
Code:
<body>
<div id="results" class="scrollingdatagrid">
Current Row: <input type="text" id="rownum" value="None" readonly>
<table id="mstrTable" cellspacing="0" border="1">
<thead>
<tr>
<th>File Numb . . .
Then we can instead do (in the highlightRow function):
Code:
function highlightRow(gethighlight) { //now dual use - either set or get the highlighted row
gethighlight = gethighlight === true;
var t = trows.length;
while (--t > -1) {
trow = trows[t];
if(gethighlight && trow.className === 'highlighted'){return t;}
else if (!gethighlight){
if(trow !== this) { trow.className = 'normal'; }
else if(this.className === 'normal') { rownum.value = t; }
else { rownum.value = rownum.defaultValue; }
}
}//end while
return gethighlight? null : this.className = this.className === 'highlighted'? 'normal' : 'highlighted';
}//end function
Which means we need to add rownum as a variable, and a reset for browsers that remember text inputs on reload here:
Code:
(function() {
var trows = document.getElementById('mstrTable').rows, t = trows.length, trow, nextrow,
rownum = document.getElementById('rownum'),
addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false); //modern browsers
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(e){f.apply(el, [e]);}); //IE 8 and less
}:function(){return;}; //a very old browser (IE 4 or less, or Mozilla, others, before Netscape 6), so let's skip those
})();
rownum.value = rownum.defaultValue; //reset for browsers that remember input values on reload
while (--t > -1) {
tro . . .
Here's the whole thing:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
tr.normal td {
color: black;
background-color: white;
}
tr.highlighted td {
color: white;
background-color: red;
}
</style>
</head>
<body>
<div id="results" class="scrollingdatagrid">
Current Row: <input type="text" id="rownum" value="None" readonly>
<table id="mstrTable" cellspacing="0" border="1">
<thead>
<tr>
<th>File Number</th>
<th>Date1</th>
<th>Date2</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>3</td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
(function() {
var trows = document.getElementById('mstrTable').rows, t = trows.length, trow, nextrow,
rownum = document.getElementById('rownum'),
addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false); //modern browsers
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(e){f.apply(el, [e]);}); //IE 8 and less
}:function(){return;}; //a very old browser (IE 4 or less, or Mozilla, others, before Netscape 6), so let's skip those
})();
rownum.value = rownum.defaultValue; //reset for browsers that remember input values on reload
while (--t > -1) {
trow = trows[t];
trow.className = 'normal';
addEvent(trow, 'click', highlightRow);
}//end while
function highlightRow(gethighlight) { //now dual use - either set or get the highlighted row
gethighlight = gethighlight === true;
var t = trows.length;
while (--t > -1) {
trow = trows[t];
if(gethighlight && trow.className === 'highlighted'){return t;}
else if (!gethighlight){
if(trow !== this) { trow.className = 'normal'; }
else if(this.className === 'normal') { rownum.value = t; }
else { rownum.value = rownum.defaultValue; }
}
}//end while
return gethighlight? null : this.className = this.className === 'highlighted'? 'normal' : 'highlighted';
}//end function
function movehighlight(way, e){
e.preventDefault && e.preventDefault();
e.returnValue = false;
var idx = highlightRow(true); //gets current index or null if none highlighted
if(typeof idx === 'number'){//there was a highlighted row
idx += way; //increment\decrement the index value
if(idx && (nextrow = trows[idx])){ return highlightRow.apply(nextrow); } //index is > 0 and a row exists at that index
else if(idx){ return highlightRow.apply(trows[1]); } //index is out of range high, go to first row
return highlightRow.apply(trows[trows.length - 1]); //index is out of range low, go to last row
}
return highlightRow.apply(trows[way > 0? 1 : trows.length - 1]); //none was highlighted - go to 1st if down arrow, last if up arrow
}//end function
function processkey(e){
switch(e.keyCode){
case 38: {//up arrow
return movehighlight(-1, e)
}
case 40: {//down arrow
return movehighlight(1, e);
}
default: {
return true;
}
}
}//end function
addEvent(document, 'keydown', processkey);
addEvent(window, 'unload', function(){}); //optional, resets the page for browsers that remember the script state on back and forward buttons
}/* end function */)();//execute function and end script
</script>
</body>
</html>
There's one more optional addition with that, at the end. Opera and Firefox, perhaps others, will remember the script state on navigation to the page that uses the back or forward buttons unless you set an unload event for the page, even an empty one. But this is OK as long as you don't mind that, and as long as the page isn't likely to perhaps have different rows due to a database change or something. So, if you don't mind it and the page doesn't require it, you can comment it out.
Using the up and down arrow keys to select a table row
Reply With Quote
Bookmarks