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="th is.className='c urrent';"
onmouseup="this .className='cur rent'; saveRecord('<%= a%>',
'<%=b%>',
'<%=c%>');"
<%if (color%2==0){%>
onmouseout="thi s.className='ev en';" class="even"
<% } else { %>
onmouseout="thi s.className='od d ';" 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="retur n 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.valu e = 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.toLo werCase() ){
// Store reference to row and its colour
oldRow.r = r;
oldRow.c = r.style.backgro undColor;
// Highlight clicked on row
r.style.backgro undColor = hc;
// Otherwise, reset oldRow values
} else {
oldRow.r = null;
oldRow.c = null;
}
}
function initTable(t){
if ( !document.getEl ementById || !document.body. style ) {return;}
var r = document.getEle mentById(t).row s;
var i = r.length;
while ( i-- ) {
r[i].onclick=functi on(){highlightR ow(this);};
}
}
window.onload = function() {initTable('tab leA')};
</script>
<table id="tableA">
<tr style="backgrou nd-color: #FFFF33;">
<td>blah</td><td>blah</td>
</tr>
<tr style="backgrou nd-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
