469,568 Members | 1,673 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,568 developers. It's quick & easy.

how to highlight a row when on click and keep it highlighted until next click

Hi

I'm not good at JS, but want to get more about it.

I want to use a JSP (the java code just used to get date, the rest are
html and javascript),

to display a table. the requirement is the all rows in even number in
light-blue, rows in odd number in light gray, when a mouse clicks on a
row, this row gets highlighted and in yellow, and it keeps highlighted
until next row is clicked on; plus when a row gets click, the data on
the row is saved to forward to (same as putting vales in input form
then forward to action form).

part of my code is

int color=0;

<tr onmousedown="this.className='current';"
onmouseup="this.className='current'; saveRecord('<%=a%>',
'<%=b%>',
'<%=c%>');"
<%if (color%2==0){%>
onmouseout="this.className='even';" class="even"
<% } else { %>
onmouseout="this.className='odd ';" class="odd"
<% } %>

<td><%=e%></td>
<td>

...
function saverecord(...)

//<% %> is java code tag in jsp, used to get value

question
1.
result from above code, rows get highlighted when mouse moveing on it,
and can't keep highlighted for long (when mouse moves away,it is no
long in yellow).

2.
in saverecord function, what is the idea to put the valuables (a, b, c,
--they are global vars) in a hidden input form? or other way to
implement this?

--
Thanks
John
Toronto

Jul 23 '05 #1
1 4921
john woo wrote:
Hi

I'm not good at JS, but want to get more about it.

I want to use a JSP (the java code just used to get date, the rest are
html and javascript),

to display a table. the requirement is the all rows in even number in
light-blue, rows in odd number in light gray, when a mouse clicks on a
row, this row gets highlighted and in yellow, and it keeps highlighted
until next row is clicked on; plus when a row gets click, the data on
the row is saved to forward to (same as putting vales in input form
then forward to action form).

part of my code is

int color=0;

<tr onmousedown="this.className='current';"
onmouseup="this.className='current'; saveRecord('<%=a%>',
'<%=b%>',
'<%=c%>');"
<%if (color%2==0){%>
onmouseout="this.className='even';" class="even"
<% } else { %>
onmouseout="this.className='odd ';" class="odd"
<% } %>

<td><%=e%></td>
<td>

...
function saverecord(...)

//<% %> is java code tag in jsp, used to get value

question
1.
result from above code, rows get highlighted when mouse moveing on it,
and can't keep highlighted for long (when mouse moves away,it is no
long in yellow).
Below is some code that highlights a row when they are clicked on.
The current highlight is removed when the next row is clicked on.

2.
in saverecord function, what is the idea to put the valuables (a, b, c,
--they are global vars) in a hidden input form? or other way to
implement this?


Always remember that if the user has JavaScript disabled or not
available, you will not get the global variables (they won't even
exist).

In your form, create a hidden field:

<form name="formA" onsubmit="return doForm(this);" ... >
<input type="hidden" name="globVars" ... >
...
</form>

In your script, create function doForm:

function doForm(f){
// Do form validation, if doesn't pass return false
// If does pass, put values into hidden field with your
// choice of delimiter:

f.globVars.value = a + ',' + b + ',' + c;

}

And the promised highlighting script:

<style type="text/css">
td {width: 5em;}
..even {color: #00FF00; background-color: #B3B3FF;}
..odd {color: #00FF00; background-color: #FFFF33;}
</style>

<script type="text/javascript">

// Variable to remember table, row and original
// colour of previous element.
var oldRow = { r:null , c:null };

// Highlight color (should use CSS)
var hc = '#CC0066';

function highlightRow(r){

// If oldRow has been set, restore previous row
if ( oldRow.r ) {
oldRow.r.style.backgroundColor = oldRow.c;
}

// If a row was clicked on
if ( r && 'tr' == r.nodeName.toLowerCase() ){
// Store reference to row and its colour
oldRow.r = r;
oldRow.c = r.style.backgroundColor;
// Highlight clicked on row
r.style.backgroundColor = hc;

// Otherwise, reset oldRow values
} else {
oldRow.r = null;
oldRow.c = null;
}
}

function initTable(t){
if ( !document.getElementById || !document.body.style ) {return;}
var r = document.getElementById(t).rows;
var i = r.length;
while ( i-- ) {
r[i].onclick=function(){highlightRow(this);};
}
}

window.onload = function() {initTable('tableA')};

</script>
<table id="tableA">
<tr style="background-color: #FFFF33;">
<td>blah</td><td>blah</td>
</tr>
<tr style="background-color: #B3B3FF;">
<td>blah</td><td>blah</td>
</tr>
<tr class="odd">
<td>blah</td><td>blah</td>
</tr>
<tr class="even">
<td>blah</td><td>blah</td>
</tr>
</table>
<input type="button" value="Clear highlight" onclick="
highlightRow();
">

--
Rob
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Christophe Guillon | last post: by
2 posts views Thread by Hari | last post: by
2 posts views Thread by Sridhar | last post: by
2 posts views Thread by yes_its_just_me | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.