Forum Moderators: open
So for a table called 'tblswatches',
document.all.tblswatches.rows(irow).cells(icol).borderColor='#AAAAAA';
turns the border on.
document.all.tblswatches.rows(irow).cells(icol).borderColor='#FFFFFF';
turns the border off.
This works great in IE--better than any other method I had tried. Other methods caused the table to resize as the user clicked different selections. However, Firefox does not support bordercolor. I can't just use CSS because I need to be able to use the JavaScript to change the border colors as the user clicks on different choices.
Any thoughts on how to implement this with Firefox? I certainly don't want to alienate that growing user base.
Firefox does not support bordercolor.
Not true: Javascript borderColor is supported by FF, however, document.all is MSFT proprietary introduced in Internet Explorer 4 and replaced (IE still retains legacy support) by document.all in IE5, Opera6, NN6, Moz/FF and subsequent browsers.
Unless you expect IE4 users you can safely discontinue document.all.
Possible problem - id must be unique, one per page (each td would need its own id) - so your code is closer to requiring document.getElementsByTagName.
Or use CSS and a function similar to following:
<style type="text/css">
* {padding: 0; margin: 0;}
table {width: 400px; background: #00f;
}
.white {border: 1px solid #fff;
}
.red {border: 1px solid #f00;
}
</style><script type="text/javascript">
var oPrevTd;
function changeBorder(oTd){
oTd.className='red';
if (oPrevTd && oPrevTd!=oTd){
oPrevTd.className='white';
}
oPrevTd = oTd;
}
</script></head>
<body>
<table>
<tr>
<td class="white" onclick="changeBorder(this)"> </td>
<td class="white" onclick="changeBorder(this)"> </td>
</tr>
<tr>
<td class="white" onclick="changeBorder(this)"> </td>
<td class="white" onclick="changeBorder(this)"> </td>
</tr>
</table>
