Hi
Can any tell me what is the javascript equivalent of CSS border? I
would like to change the border of my cell when it is set on focus. I
have tried onFocus="style.border='3px'" but it is not working.
I doubt you want the border turned on when the cell has the focus set on
it (that would require the user actually click on the cell). Also,
Gecko-based browsers and Opera have no concept of "focus" on a table
cell:
<table><tr><td onfocus="alert('hi');">TEST</td></tr></table> does
nothing in a Gecko-based browser or Opera, no matter how much you click
and move the mouse around.
So, you probably want to do this onmouseover and onmouseout (to clear
the border when they leave the cell):
<script type="text/javascript">
function mOver(cell)
{
if (cell.style && 'undefined' != typeof cell.style.border)
{
cell.style.border = '3px solid Black';
}
}
function mOut(cell)
{
if (cell.style && 'undefined' != typeof cell.style.border)
{
cell.style.border = 'none';
}
}
</script>
<table>
<tr>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
</tr>
</table>
Note this creates a rather undesirable rearranging of the table as you
move the mouse around. Personally I'd probably do something like:
<style type="text/css">
td { border: 3px solid White; }
td.mOver { border: 3px solid Black; }
</style>
<script type="text/javascript">
function mOver(cell)
{
if ('undefined' != typeof cell.className)
{
cell.className = 'mOver';
}
}
function mOut(cell)
{
if ('undefined' != typeof cell.className)
{
cell.className = '';
}
}
</script>
<table>
<tr>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
</tr>
</table>
Of course, in browsers that support it (Gecko-based browsers, Opera),
all this can be replaced by:
<style type="text/css">
td { border: 3px solid White; }
td:hover { border: 3px solid Black; }
</style>
<table>
<tr>
<td>TEST</td><td>TEST</td><td>TEST</td>
</tr>
</table>
