SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to highlight rows on link click?

    Hello,

    I have an HTML table with many rows and columns with each row containing info about one specific item and a delete link (there is a delete link for each row). What I want to do is to highlight the whole row (<tr> element) in the table (with a different background color) when I click on the delete link of that row (the new page opens in a new window.)

    My question is:
    How do I highlight (by changing the bg color for the whole <tr> element or -if that's not possible- all of that row's <td> elements) the row if I have clicked the delete link in that row. I want the row to stay highlighted so that I would know what rows were deleted.
    I guess this'll require id-specific actions applied to the row <tr> or all of its cells with an onclick event in that rows delete link.

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function changeBgC(which) {
    	document.getElementById(which).style.backgroundColor = 'yellow';
    	}
    </script>
    </head>
    <body>
    <table border="1">
    <tr id="fR">
    	<td>blah</td>
    	<td>blah</td>
    	<td><a href="javascript:void(0);" onclick="changeBgC('fR')">Delete row</a></td>
    </tr>
    <tr id="sR">
    	<td>blah</td>
    	<td>blah</td>
    	<td><a href="javascript:void(0);" onclick="changeBgC('sR')">Delete row</a></td>
    </tr>
    </table>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast Azmeen's Avatar
    Join Date
    Apr 2007
    Location
    Johor Bahru, Johor, Malaysia
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My slightly different method:

    HTML Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    #thetable tr {
    	background-color: #00ff00;
    }
    </style>
    <script type="text/javascript">
    function hiliteme(therow) {
    	theelem = document.getElementById(therow);
    	theelem.style.backgroundColor = "#ff0000";
    	alert('Row ' + therow + ' should be red now');
    	theelem.style.backgroundColor = "#00ff00";
    }
    </script>
    </head>
    <body>
    <table id="thetable">
    <tr id="row1">
    <td>Some stuff</td><td>More Stuff</td><td><a href="#row1" onclick="hiliteme('row1')">[Del]</a></td>
    </tr>
    <tr id="row2">
    <td>Some stuff</td><td>More Stuff</td><td><a href="#row2" onclick="hiliteme('row2')">[Del]</a></td>
    </tr>
    <tr id="row3">
    <td>Some stuff</td><td>More Stuff</td><td><a href="#row3" onclick="hiliteme('row3')">[Del]</a></td>
    </tr>
    </table>
    </body>
    </html>
    I can help with Linux, Apache, MySQL and PHP stuff at most times.
    I may be able to assist in other general IT issues. Try me
    Web Sites I Run:
    HTNet | Welley Corporation | blings.info

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EDIT: Thanks Azmeen, bosko! I was on the reply page for a while and didn't notice your replies!

    Just found it!

    Hope someone finds it useful.

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function visited(a) {
      tr = a.parentNode.parentNode;
      tr.style.backgroundColor = "red";
    }
    </script>
    </head>
    <body>
    <table>
     <tr>
      <td>This row will be highlighted in red after you...</td>
      <td>Click on the following link</td>
      <td><a href="http://google.com" target="_blank" onclick="visited(this)">Google</a></td>
     </tr>
    </table>
    </body>
    </html>


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
  •