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);
  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:

            <tr id="aa">
        <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;
                                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');

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

  • Comment
  • Preview


Powered by BlogEngine.NET
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


<<  May 2021  >>

View posts in large calendar