Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Use Arrows keys to highlight selected row

    Hello,

    I need your help,

    The code below is used to highlight the selected (clicked) row from the grid table. However, i'd like to add functionality such that when the focus is on the table and I use both the arrow up and down keys it will also highlight and go to the next (down key) or previous row (up key). I am still a newbie to this all and have had previous help with the existing coding.

    Any help is greatly and most appreciated. Thank you all for your help and support in advance.

    Code:
    <html>
    <head>
    	<meta http-equiv="Content-Language" content="en-ca">
    	<title>Scrolling Data Grid</title>
    <style>
    /* ==================================================================== */
    /* SCROLLING DATA GRID                                                  */
    /* ==================================================================== */
    DIV.scrollingdatagrid {
    	overflow-x:auto;
    	overflow-y:auto;
    	position:relative;
    	padding:0px;
    }
    DIV.scrollingdatagrid TABLE {
    	width : 98.7%; /* Make room for scroll bar! */
    	margin:0px;
    	border:0px;
    	border-collapse:separate;
    }
    DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR {
    	position:relative;
    }
    /* OffsetParent of the TR is the DIV because it is position:relative */
    DIV.scrollingdatagrid TABLE THEAD TR {
    	top:expression(this.offsetParent.scrollTop);
    }
    
    
    /* Make the z-index values very clear so overlaps happen as expected! */
    DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
    DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
    DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
    DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }
    </style>
    
    
    <script type="text/javascript">
    window.onload = function() { 
    
    var cn 		=	new ActiveXObject("ADODB.Connection")
    var rs		=	new ActiveXObject("ADODB.Recordset")
    var dbFile 	=	"imts.mdb"
    var dbPath	=	"F:\\PROJECTS\\IMTS PROJECT\\V8\\database\\"
    
    var mySQL	= "SELECT * FROM tbl_imts WHERE [FILE NUMBER] LIKE '%99%'"
    var html	= ""
    
    cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbFile + "");
    rs.Open(mySQL, cn, 1, 3)
    
    html += '<table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0">\n'
    html +=	'<thead>\n'
    html += '<tr>\n'
    html += '<th class="locked" style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); text-align: center; height: 30px; width: 20px; color: rgb(102,102,102); background-color: rgb(212,208,200);">#</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(0).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(1).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(2).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(3).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(4).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(5).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(6).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(7).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(8).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(9).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(10).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(11).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(12).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(13).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(14).name + '</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: none; padding-left: 5px; width: 100px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(15).name + '</th>\n'
    html += '</tr>\n'
    html += '</thead>\n'
    
    rs.MoveFirst
    var i = 0
    html += '<tbody>\n'
    while (!rs.eof) {
    ++i
    html +=	'<tr style="color: rgb(102,102,102)">\n'
    html +=	'<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">'+i+'.</td>\n'
    	for (var r = 0; r < rs.fields.count; ++r) {
    	if (!rs.fields(r).value) { rs.fields(r).value = "&nbsp;" }
    	html	+=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">'+rs.fields(r).value+'</td>\n'
    	}//end of for
    	html	+=	'</tr>\n'
        rs.MoveNext 
        }//end of while
    html += '</tbody>\n'
    html += '</table>\n'
    
    document.getElementById("p1").innerHTML = html
    
    
    var color = "#E1E0D7"
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    }//end of function
    
    if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    
    
    
    }//end of onload
    
    
    
    </script>
    
    </head>
    
    <body>
    
    <div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"></div>
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,447
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Can you give us an example using static HTML, no ActiveX objects?

    We can't duplicate your code without your DB, etc.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    As requested Old Pendant,

    Here is a working copy of my code without any DB integration:

    I swear it must be rocket science to implement arrow keys up and down to highlight the rows. I can't seem to find guidance material anywhere. Hence the need and help of an expert

    Thanks

    Jay

    Code:
    <html>
    <head>
    	<meta http-equiv="Content-Language" content="en-ca">
    	<title>Scrolling Data Grid</title>
    <style>
    /* ==================================================================== */
    /* SCROLLING DATA GRID                                                  */
    /* ==================================================================== */
    DIV.scrollingdatagrid {
    	overflow-x:auto;
    	overflow-y:auto;
    	position:relative;
    	padding:0px;
    }
    DIV.scrollingdatagrid TABLE {
    	width : 98.7%; /* Make room for scroll bar! */
    	margin:0px;
    	border:0px;
    	border-collapse:separate;
    }
    DIV.scrollingdatagrid TABLE TR .locked, DIV.scrollingdatagrid TABLE THEAD TR, DIV.scrollingdatagrid TABLE TFOOT TR {
    	position:relative;
    }
    /* OffsetParent of the TR is the DIV because it is position:relative */
    DIV.scrollingdatagrid TABLE THEAD TR {
    	top:expression(this.offsetParent.scrollTop);
    }
    
    
    /* Make the z-index values very clear so overlaps happen as expected! */
    DIV.scrollingdatagrid TD, DIV.scrollingdatagrid TH { z-index:1; }
    DIV.scrollingdatagrid TD.locked, DIV.scrollingdatagrid TH.locked { z-index:2; }
    DIV.scrollingdatagrid THEAD TR, DIV.scrollingdatagrid TFOOT TR { z-index:3; }
    DIV.scrollingdatagrid THEAD TR TH.locked { z-index:4; }
    </style>
    
    
    <script type="text/javascript">
    window.onload = function() { 
    html =	''
    html += '<table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0">\n'
    html +=	'<thead>\n'
    html += '<tr>\n'
    html += '<th class="locked" style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); text-align: center; height: 30px; width: 20px; color: rgb(102,102,102); background-color: rgb(212,208,200);">#</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN1</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN2</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN3</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN4</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN5</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN6</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN7</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN8</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN9</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN10</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN11</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN12</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN13</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN14</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN15</th>\n'
    html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: none; padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">	COLUMN16</th>\n'
    html += '</tr>\n'
    html += '</thead>\n'
    html += '<tbody>\n'
    html +=	'<tr style="color: rgb(102,102,102)">\n'
    html +=	'<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">1.</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'</tr>\n'
    html +=	'<tr style="color: rgb(102,102,102)">\n'
    html +=	'<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">2.</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'</tr>\n'
    html +=	'<tr style="color: rgb(102,102,102)">\n'
    html +=	'<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">3.</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'</tr>\n'
    html +=	'<tr style="color: rgb(102,102,102)">\n'
    html +=	'<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">4.</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'<td style="border-right: none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">DATA</td>\n'
    html +=	'</tr>\n'
    html += '</tbody>\n'
    html += '</table>\n'
    
    document.getElementById("p1").innerHTML = html
    
    
    var color = "#E1E0D7"
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    	for(var i=0; i<n; ++i) {
    		rows[i].style.backgroundColor = bgcs[i];
    		if(rows[i]==o) {
    		rows[i].style.backgroundColor = color;
    		}//end of if
    	}//end of for
    }//end of function
    
    if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    
    
    
    }//end of onload
    
    
    
    </script>
    
    </head>
    
    <body>
    
    <div id="p1" class="scrollingdatagrid" style="width:800px;height:200px;border:1px solid rgb(128,128,128);"></div>
    
    </body>
    
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •