john woo wrote:[color=blue]
> 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).[/color]
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.
[color=blue]
>
> 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?
>[/color]
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
