Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: Javascript Change Table Row Color

  1. #11
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi Guys,
    The above suggested code is working very fine. Though I have got one more requirement and I am breaking my head to align the anchor tags in TD's for vertically aligning in middle. The code I am using is given below:

    <html>
    <head><style type="text/css">

    td a {
    display: block;
    height: 100%;
    }
    </style></head>
    <body >

    <table id="mstrTable" width="100%";>
    <tr >
    <td height="65" valign="middle" >

    <a href="#">Link1</a>
    </td>
    </tr>
    <tr >
    <td height="65" >
    <a href="#">Link2</a>
    </td>
    </tr>
    <tr >
    <td height="65">
    <a href="#">Link3</a>
    </td>
    </tr>
    </table>
    <script type="text/javascript" />
    (function() {
    var color = "f00";
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    rows[0].style.backgroundColor = color;
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    for(var i=0; i<n; ++i) {
    rows[i].style.backgroundColor = bgcs[i];
    if(rows[i]==o) rows[i].style.backgroundColor = color;
    }
    }
    if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    })();
    </script>
    </body>
    </html>

    Thanks.

  2. #12
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Are you trying to do this dynamically or if not you could just set the vertical alignment in mstrTable's style property.

  3. #13
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Tried to assign Vertical alignment property for mstrTable, still unable to achive. And there is nothing dynamically, I have shown you the code as is.

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,189 Times in 3,153 Posts
    Blog Entries
    12

    Default

    The fact that the link is display block makes it follow its own vertical alignment rules. A block level element cannot innately have vertical alignment.

    If we use a DOCTYPE that forces standards compliance, we can make its display table-cell:

    Code:
    <!DOCTYPE html>
    <html>
    <head><style type="text/css">
    td a {
    	display: table-cell;
    	height: 100%;
    	vertical-align: middle;
    }
    td {
    	height: 65px;
    }
    </style>
    
    </head>
    <body>
    
    <table id="mstrTable" width="100%";>
    <tr style="background-color: #fff">
    <td>
    
    <a href="#">Link1</a>
    </td>
    </tr>
    <tr style="background-color: #fff">
    <td>
    <a href="#">Link2</a>
    </td>
    </tr>
    <tr style="background-color: #fff">
    <td>
    <a href="#">Link3</a>
    </td>
    </tr>
    </table>
    <script type="text/javascript" />
    (function() {
    var color = "#f00";
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
    rows[0].style.backgroundColor = color;
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    for(var i=0; i<n; ++i) {
    rows[i].style.backgroundColor = bgcs[i];
    if(rows[i]==o) rows[i].style.backgroundColor = color;
    }
    }
    if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    })();
    </script>
    </body>
    </html>
    And it will respect the vertical alignment. But the link will no longer occupy the entire cell or row in the case of a single cell in the row as you have it. Using width 100% on the link for some reason (probably the table-cell display allows it only to be the width of its content) will not fix that. You had said you wanted that, but I think that's counterproductive. If the link occupies the entire cell/row, then the color change, if seen at all, will be very brief before the link fires.

    But you may have other plans for the link or have it be to a named anchor on the page. We can make clicking on the cell do the same thing as clicking on the link would do, but unless that's to fire normally, I would need to know your plans for the link in order to carry that out properly.

    However, if you just want the link to fire as a normal link (to another page or to a named anchor on the same page) when the row is clicked on, these changes to the javascript can accomplish that:

    Code:
    (function() {
    var color = "#f00";
    var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
    var n = rows.length;
    var bgcs = [];
    for(var i=0; i<n; ++i) {
    	bgcs[i] = rows[i].style.backgroundColor;
    	rows[i].style.cursor = 'pointer';
    	rows[i].onclick = function(){
    		location = this.getElementsByTagName('a')[0].href;
    	};
    }
    rows[0].style.backgroundColor = color;
    function changeColor(e) {
    if(!e) e = window.event;
    var o = e.target? e.target: e.srcElement;
    while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
    for(var i=0; i<n; ++i) {
    rows[i].style.backgroundColor = bgcs[i];
    if(rows[i]==o) rows[i].style.backgroundColor = color;
    }
    }
    if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
    else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
    })();
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    what would happen if the links weren't display block?

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,189 Times in 3,153 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by riptide View Post
    what would happen if the links weren't display block?
    No vertical-align could be applied to them.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •