Here's another workaround to fix another elementary problem in Internet Explorer. Again, this isn't anything new, but if anyone is coming across this blog looking for an answer to this problem, here's the solution.
(And by the way, yeah, this is really elementary. I should be focusing on real problems.)
Someone in a local technology mailing list asked for help on how one highlights a table row in Javascript. He tried the following function, but it did not work for him.
function OutlineTableRow(RowID,BColor,BWidth,BStyle)
{
var TableRow = document.getElementById(RowID);
if(TableRow)
{
TableRow.style.borderColor = BColor;
TableRow.style.borderStyle = BStyle;
TableRow.style.borderWidth = BWidth;
}
}
So how to you border-highlight a row in HTML? Internet Explorer doesn't support CSS on the TR like it should. You have to do it on the cells themselves. You also have to be careful not to divide the cells with borders; the leftmost and rightmost cells should be the only cells to get left or right borders, respectively. Finally, you must also set the border-collapse CSS property on the table to "collapse", otherwise the border itself will have seperation points on the inner edges of each cell.
Here's my workaround in Javascript, feel free to copy:
<html>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="aa">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script type="text/javascript" language="javascript" >
function outlineTableRow(rowId, borderColor, borderWidth, borderStyle){
var tableRow = document.getElementById(rowId);
if (tableRow) {
var table = tableRow.parentNode;
while (table.tagName.toLowerCase() != "table") {
table = table.parentNode;
}
table.style.borderCollapse = "collapse";
var tableCells = tableRow.getElementsByTagName('td');
if (tableCells.length > 0) {
for (i = 0; i < tableCells.length; i++) {
if (i == 0) {
tableCells[i].style.borderLeftColor = borderColor;
tableCells[i].style.borderLeftStyle = borderStyle;
tableCells[i].style.borderLeftWidth = borderWidth;
}
else
if (i == tableCells.length - 1) {
tableCells[i].style.borderRightColor = borderColor;
tableCells[i].style.borderRightStyle = borderStyle;
tableCells[i].style.borderRightWidth = borderWidth;
}
tableCells[i].style.borderTopColor = borderColor;
tableCells[i].style.borderTopStyle = borderStyle;
tableCells[i].style.borderTopWidth = borderWidth;
tableCells[i].style.borderBottomColor = borderColor;
tableCells[i].style.borderBottomStyle = borderStyle;
tableCells[i].style.borderBottomWidth = borderWidth;
}
}
}
}
window.onload = function(){
outlineTableRow('aa', '#f00', '2px', 'outset');
}
</script>
</body>
</html>
Result:
But one should use CSS for this. Rather than explicitly setting [element].style.[cssproperty], instead one should set the className property, then define the details in CSS. If you really want to pass arbitrary styles to a function, jQuery would also be essential for doing this. Come to think of it, jQuery would be essential, regardless.
Subscribe