Highlighting a TR (HTML Table Row) With A Border

by Jon Davis 29. March 2008 15:44

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:
1 2 3
1 2 3
1 2 3

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.

Currently rated 3.0 by 1 people

  • Currently 3/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

Web Development

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading




 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  August 2020  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar

RecentPosts