PDA

View Full Version : highlight specified cells


shibby1011ph
10-17-2002, 07:08 AM
<html>
<head>
<title>Column and Cell Highlight Test</title>
<style>
colgroup.over {
background-color: #F99;
}
colgroup.over1 {
background-color: "red";
}
</style>
<script type="text/javascript" language="javascript">
function hiliteColumn(e) {
var o = (document.all) ? e.srcElement : e.target;
if (o.nodeName != "TD") return;
document.getElementById("cg"+(o.cellIndex+1)).className="over";
}
function resetColumn(e) {
var o = (document.all) ? e.srcElement : e.target;
if (o.nodeName != "TD") return;
document.getElementById("cg"+(o.cellIndex+1)).className="";
}
var click_num = 0;
function getCell()
{ var obj = event.srcElement;
var dummy = 0;
var x;

if (obj.tagName == "INPUT")
{ if(eval(obj.getAttribute("checked")))
{ click_num++; document.getElementById("cell"+click_num).className="over1";
}
}
}
</script>
</head>
<body>
<table border="1" onMouseOver="hiliteColumn(event);" onMouseOut="resetColumn(event);">
<colgroup id="cg1"></colgroup>
<colgroup id="cg2"></colgroup>
<colgroup id="cg3"></colgroup>
<colgroup id="cg4"></colgroup>
<tr>
<td id="cell1">blah</td>
<td id="cell2">blah</td>
<td id="cell3">blah</td>
<td id="cell4">blah</td>
</tr>
<tr>
<td id="cell5">blah</td>
<td id=cell6>blah</td>
<td id="cell7">blah</td>
<%
out.println("<td id='cell8' onClick=getCell();"+">");
out.println("<input type=checkbox name='x' value=2>");
out.println("</td>");
%>
</tr>
</table>
</body>
</html>

the code written above is suppose to go like this:

if you check the checkbox once, cell1 is going to be red and other cells are white.
if you check the checkbox again, cell2 is going to be red and other cells are white.
if you check the checkbox again, cell3 is going to be red and other cells are white.
and so on with the remaining cells.

but the problem is that is not the case. in fact, there's an error and i dont know why. don't worry if click_num reaches the value of 8. i'll probably add another if-else statement but my main problem right now is that the cells don't turn to red.

please help me! any response will be greatly appreciated, thank u very much!!!

Mr J
10-17-2002, 03:00 PM
I managed to get it to work to some degree with the additions and changes I made to function getcell() but still needs more work for when click_num is greater than cells etc.

May give you ideas.






function getCell(){
last=click_num // added
var obj = event.srcElement;
var dummy = 0;
var x;

if (obj.tagName == "INPUT"){
if(eval(obj.getAttribute("checked"))){
click_num++;
document.getElementById("cell"+click_num).bgColor="red" // changed

if(last==0){return} // added
else{ // added
document.getElementById("cell"+last).bgColor="white" // added
} // added
}
}
}