Below is code... Thanks for your help.
[HTML]<HTML>
<Head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type="text/css">
.tableExample{border-collapse: collapse; border: 0px solid black;}//code helped by unknown source on codingforums.com
.tableExample tr td{cursor:pointer; border: 0px solid black; padding: 0px;}
.odd{background-color:#F5DEB3';}
.even{background-color:#F5DEB3';}
.high{background-color:#FFFF00;font-size:medium;font-weight:bold;position:static;}
.selected{background-color:#FFFF00;font-size:medium;font-weight:bold;}
</style>
<script type="text/javascript">
var table1 = null;
window.onload = function(){
table1 = new table.SelectableLSPEC("tableExample1",true)
}
var table = {};
table.keys = {
AddNew : function(id,action){
this.monitorActions[id] = action;
this.quickLookup.push(id);
},
monitorActions : new Array(),
quickLookup : new Array()
}
table.ActiveTable = null;
table.SelectableLSPEC = function(tableId,activate){
var ref = this;
this.tableId = tableId;
this._init();
this.selectedId = null;
table.keys.AddNew(tableId,ref);
if(activate){
table.ActiveTable = tableId;
this.selectFirst();
}
}
table.SelectableLSPEC.prototype._init = function(){
var ref = this;
var elemTable = document.getElementById(this.tableId);
var rows = elemTable.getElementsByTagName("tr");
var cnt = rows.length;
for(var i=0; i<cnt;i++){
var className = (i%2)?"odd":"even";
rows[i].className = className;
rows[i].defaultClassName = className;
rows[i].onmouseover = function(){if(this.className!="selected")this.clas sName="high";}
rows[i].onmouseout = function(){if(this.className!="selected")this.clas sName=this.defaultClassName;}
rows[i].onclick = function(){ref.select(this)};
}
elemTable = null;rows=null;
}
table.SelectableLSPEC.prototype.select = function(elem){
this.removeSlections();
this.selectedId = (this.selectedId!=elem.id)?elem.id:null;
if(this.selectedId!=null)elem.className = "selected";
}
table.SelectableLSPEC.prototype.removeSlections = function(elem){
var elemTable = document.getElementById(this.tableId);
var rows = elemTable.getElementsByTagName("tr");
var cnt = rows.length;
for(var i=0; i<cnt;i++)rows[i].className = rows[i].defaultClassName;
elemTable=null; rows=null;
}
table.SelectableLSPEC.prototype.selectFirst = function(){
var elemTable = document.getElementById(this.tableId);
var firstRow = elemTable.getElementsByTagName("tr")[0];
firstRow.className = "selected"
this.selectedId = firstRow.id;
elemTable=null; firstRow=null;
}
table.SelectableLSPEC.prototype.keyClick = function(keyCode){
var direction = (keyCode==38)?-1:(keyCode==40)?1:0;
if(direction!=0){
this.selectNext(direction);
}
}
table.SelectableLSPEC.prototype.selectNext = function(dir){
var elemTable = document.getElementById(this.tableId);
var rows = elemTable.getElementsByTagName("tr");
var cnt = rows.length;
var hasSelection = false;
for(var i=0; i<cnt;i++){
if(rows[i].className == "selected"){
if((dir==-1 && i>0) || (dir==1 && i+1<cnt)){
rows[i].className = rows[i].defaultClassName;
rows[i+dir].className = "selected";
this.selectedId = rows[i+dir].id;
}
hasSelection = true;
break;
}
}
elemTable=null; rows=null;
}
function monitorClick(e){
var evt = (e)?e:event;
var theElem = (evt.srcElement)?evt.srcElement:evt.target;
while(theElem!=null){
if(table.keys.quickLookup.indexOf(theElem.id) != -1){
table.ActiveTable = theElem.id;
return true;
}
theElem = theElem.offsetParent;
}
table.ActiveTable = null;
return true;
}
function handleKeyPress(e){
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
if(table.ActiveTable){
table.keys.monitorActions[table.ActiveTable].keyClick(keycode);
}
}
document.onclick = monitorClick;
document.onkeydown = handleKeyPress;
</script>
</head>
<body style='background-color: #F5DEB3' class='BlackFont'>
<table class="tableExample" id="tableExample1">
<tr id="i2_0"><td>.................................... ....................................<br></td></tr>
<tr id="i3_0"><td>..............Hello World.......Hello World......Hello World.......<br></td></tr>
<tr id="i4_0"><td>..............Hello World............................................. ...<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i6_0"><td>"You are today where your thoughts have brought you, and you will be tomorrow where you thoughts take you" by James Allen<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i8_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i9_0"><td>"Work long play hard" UNKNOWN<br></td></tr>
<tr id="i10_0"><td>Javascript is fun<br></td></tr>
<tr id="i11_0"><td>"You are today where your thoughts have brought you, and you will be tomorrow where you thoughts take you" by James Allen<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i13_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i14_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i15_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i16_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr id="i17_0"><td>"Nothing limits achievement like small thinking, and nothign expands possibilities like unleashed thinking" by William Arthur Ward<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr id="i18_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i19_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i20_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i21_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i22_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i23_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i24_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i25_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr id="i26_0"><td>Work long play hard" UNKNOWN<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td> <br></td></tr>
<tr> <br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td> ........................ ..........................................<br></td></tr>
<tr><td> <br></td></tr>
<br>
<tr><td> <br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
<tr><td>.......................................... ..............................<br></td></tr>
</table>
</BODY>
</HTML>[/HTML]
8
