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

[john woo]

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?

 

[RobG]

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.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();
">