SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change backgroundColor of <td> whose <tr> id I have

    I am displaying a table of results to the user that looks like this...

    Code:
    <table>
    	<tr id="proposal_15">
    		<td>15</td>
    		<td>Active</td>
    		<td><a href="javascript:dropProposal(15);">X</a></td>
    	</tr>
    </table>
    If you click on the X, it does a window.confirm() to make sure they want to delete it, then deletes the proposal via an AJAX call. But before offering the confirm, I want to change the backgroundColor of each <td> to red within that <tr>.

    Since I can construct a $('proposal_15') to get at the <tr id="proposal_15">, how do I change the <td>'s inside of it to red?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By cunning use of "this" and a known structure of cells, you don't really need to set ids all over the place.
    Code:
    	<tr>
    		<td>15</td>
    		<td>Active</td>
    		<td onclick="dropProposal(this);">X</td>
    	</tr>
    
    ...
    
    function dropProposal(td) {
      var tr = td.parentNode;
    
      var tds = tr.getElementsByTagName("td");
    
      // the id is the contents of the first TD child of our TR
      var proposalID = tds[0].innerHTML;
    
      // make the background color red in each td
      for (var i=0; i < tds.length; i++) {
        tds[i].style.backgroundColor = "red";
      }
    
      // do something with proposalID - display confirm, do ajax, etc
    
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That solution worked, thanks jimfraser!

    I was almost there. I went the parentNode route in a script I tried writing before coming here, but where I went wrong was adding my JavaScript function to the link, and not as the onClick event handler for the <td>. When I did it on the link, I got more than just the <td>'s as parentNodes, and couldn't properly set the backgroundColor.


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
  •