PS: Sorry if you have seen this question before, I had it listed in the wrong forum. It's been a long day.
Expand|Select|Wrap|Line Numbers
- <Head>
- <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
- <title>test_1</title>
- <style type="text/css">
- .tableExample{border-collapse: collapse; border: 0px solid black; overflow: auto; }
- .tableExample tr td{cursorointer; 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: fixed;}
- .selected{background-color:#FFFF00;font-size:medium;font-weight:bold;}
- </style>
- <script type="text/javascript">
- 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.className="high";}
- rows[i].onmouseout = function(){if(this.className!="selected")this.className=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;
- switch (keyCode) {
- case 38:
- direction = -1;
- break;
- case 40:
- direction = 1;
- break;
- default:
- direction = 0;
- break;
- }
- if(direction!=0){
- this.selectNext(direction);
- document.scrollTop = hilightedElement.offsetTop;
- }
- }
- 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;
- rows[i+dir].scrollIntoView(dir == -1);
- }
- 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 code;
- if (window.event) {
- code = window.event.keyCode;
- event.cancelBubble = true;
- } else if (e) {
- code = e.which;
- e.stopPropagation();
- }
- if(table.ActiveTable){
- table.keys.monitorActions[table.ActiveTable].keyClick(code);
- }
- return false;
- }
- document.onclick = monitorClick;
- document.onkeydown = handleKeyPress;
- var table1 = null;
- window.onload = function(){
- table1 = new table.SelectableLSPEC("tableExample1",true)
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <table class="tableExample" id="tableExample1">
- <tr id="i1_0"><td> <span class='BigFont'>Test Code</Span>Test Code<br></td>
- <tr id="i2_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i3_0"><td>..............Test Code.......Test Code......Test Code.......<br></td></tr>
- <tr id="i4_0"><td>..............TEst................................ ................<br></td></tr>
- <tr id="i5_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i6_0"><td>Test Code<br></td></tr>
- <tr id="i7_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i8_0"><td>Test Code<br></td></tr>
- <tr id="i9_0"><td>Test Code<br></td></tr>
- <tr id="i10_0"><td>Test Code<br></td></tr>
- <tr id="i11_0"><td>Test Code<br></td></tr>
- <tr id="i12_0><td>.................................................. ......................<br></td></tr>
- <tr id="i177_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i18_0"><td>Test Code<br></td></tr>
- <tr id="i19_0"><td>Test Code<br></td></tr>
- <tr id="i20_0"><td>Test Code<br></td></tr>
- <tr id="i21_0"><td>Test Code<br></td></tr>
- <tr id="i22_0"><td>Test Code<br></td></tr>
- <tr id="i23_0"><td>Test Code<br></td></tr>
- <tr id="i24_0"><td>Test Code<br></td></tr>
- <tr id="i25_0"><td>Test Code<br></td></tr>
- <tr id="i26_0"><td>Test Code<br></td></tr>
- <tr id="i266_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i27_0"><td>Test Code<br></td></tr>
- <tr id="i28_0"><td>Test Code<br></td></tr>
- <tr id="i29_0"><td>Test Code<br></td></tr>
- <tr id="i30_0"><td>Test Code<br></td></tr>
- <tr id="i300_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i31_0"><td>Test Code<br></td></tr>
- <tr id="i32_0"><td>Test Code<br></td></tr>
- <tr id="i33_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i34_0"><td>Test Code<br></td></tr>
- <tr id="i35_0"><td>Test Code<br></td></tr>
- <tr id="i355_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i36_0"><td>Test Code<br></td></tr>
- <tr id="i37_0"><td>Test Code<br></td></tr>
- <tr id="i38_0"><td>Test Code<br></td></tr>
- <tr id="i388_0"><td>.................................................. ......................<br></td></tr>
- <tr id="i39_0"><td>Test Code<br></td></tr>
- <tr id="i40_0"><td>Test Code<br></td></tr>
- <tr id="i41_0"><td>Test Code<br></td></tr>
- <tr id="i42_0"><td>Test Code<br></td></tr>
- <tr id="i43_0"><td>Test Code<br></td></tr>
- <tr id="i44_0"><td>Test Code<br></td></tr>
- <tr id="i45_0"><td>Test Code<br></td></tr>
- <tr id="i46_0"><td>Test Code<br></td></tr>
- <tr id="i47_0"><td>Test Code<br></td></tr>
- <tr id="i48_0"><td>Test Code<br></td></tr>
- <tr id="i49_0"><td>Test Code<br></td></tr>
- <tr id="i50_0"><td>Test Code<br></td></tr>
- <tr id="i51_0"><td>Test Code<br></td></tr>
- <tr id="i52_0"><td>Test Code<br></td></tr>
- <tr id="i53_0"><td>Test Code<br></td></tr>
- </table>
- </body>
- </html>
- </table>
- </BODY>
- </HTML>