PDA

View Full Version : Changing table border problem

TheDarkBear
04-29-2005, 08:49 AM
I asked one of my friends if he could help me, but all he had to offer was it sounds like it could involve a javascript solution, so here I am...

I was wondering if anyone would be able to assist me in a problem I have. Say, for example, there is a web page with two frames, split down the middle. On the left frame, there is a table. In this table, are many smaller tables. Like, in the main table, on every different row, there is another table, with a word in it.

When you click on the smaller tables with the words in it; it changes the right-hand frame to display a description of this word.

What I can do is make it when you click on the table it changes the border colour, say the default is white, to a different colour, say red. This can happen for every single one of the smaller tables.

What I can't do however is make it so that only one of the smaller tables can be 'selected' at one time. For example, if you click the first table at the top, Table A, it changes the border colour from white to be red. Then you click the second table from the top, Table B. Its border colour changes from red to white, and Table A changes back from red to white.

Any ideas?
Kor
04-29-2005, 10:36 AM
For the begining here's a simple example to change dynamically the table's border:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.wh {
border: 1px solid #FFFFFF;
}
.re {
border: 1px solid #FF0000;
}
body {
background-color: #CCCCCC;
}
-->
</style>
</head>
<body>
<table class="wh" width="300" border="0" cellspacing="2" cellpadding="2" onclick="this.className='re'">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>
TheDarkBear
04-29-2005, 11:24 AM
Thanks, but I said in my first post I already knew how to change the border colour.
glenngv
04-29-2005, 11:44 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.wh {
border: 1px solid #FFFFFF;
}
.re {
border: 1px solid #FF0000;
}
body {
background-color: #CCCCCC;
}
-->
</style>
<script type="text/javascript">
var oPrevTbl;
function toggleBorder(oTbl){
oTbl.className='re';
if (oPrevTbl && oPrevTbl!=oTbl){
oPrevTbl.className='wh';
}
oPrevTbl = oTbl;
}
</script>
</head>
<body>
<table class="wh" width="300" border="0" cellspacing="2" cellpadding="2" onclick="toggleBorder(this)">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table class="wh" width="300" border="0" cellspacing="2" cellpadding="2" onclick="toggleBorder(this)">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<table class="wh" width="300" border="0" cellspacing="2" cellpadding="2" onclick="toggleBorder(this)">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
TheDarkBear
04-29-2005, 12:09 PM
Exactly as I wanted, thankyou!