Solved

Apply style to table row when link is clicked

Posted on 2007-12-06
1
1,104 Views
Last Modified: 2013-11-19
OK what i have is th HTML document and a CSS document.

I have a table with several rows.  Each cell has a link in it, what i want is, that when any of the links in the same row are clicked i want it to apply some sort of style to it in which will change the height of the row.  e.g.

Table

Row1   Row1   Row1
Row2   Row2   Row2
Row 3   Row3   Row3

The above being the table, when any of the links in row1 are clicked the height of that row changes.  
I was thinking about using the onclick and applying a style to it....but i waasnt sure how to do that?

Cheers
Gary
0
Comment
Question by:Rocker4500
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 7

Accepted Solution

by:
bdichiara earned 50 total points
ID: 20419612
If you are trying to apply 1 specific height to all rows that are clicked, then the best way is to setup a class (like ".big_row") and use an onclick:

////////     css     /////////

.big_row { height:200px; }

////////     html     ////////

<table>
    <tr id="row1">
       <td>row1a</td>
       <td>row1b</td>
        <td><a href="#" onclick="document.getElementById('row1').className = 'big_row'; return false;">expand</a></td>
    </tr>
    <tr id="row2">
       <td>row2a</td>
       <td>row2b</td>
        <td><a href="#" onclick="document.getElementById('row2').className = 'big_row'; return false;">expand</a></td>
    </tr>
    <tr id="row3">
       <td>row3a</td>
       <td>row3b</td>
        <td><a href="#" onclick="document.getElementById('row3').className = 'big_row'; return false;">expand</a></td>
    </tr>
</table>


Not sure what the application for this is, but if you're trying to "expand" to show more content, I would recommend putting extra content on a row just below each main row, and using a show/hide javascript. That's just my suggestion.


If you're looking to change the row heights to various heights, you'll need to do something slightly different.

////////     js     ////////

function expand(height,rowid){
    var the_row = document.getElementById(rowid);
    the_row.style.height = height;

    /// or if you just want to pass the number
    // the_row.style.height = height + "px";

    return false;
}

////////     html     ////////

<table>
    <tr id="row1">
       <td>row1a</td>
       <td>row1b</td>
        <td><a href="#" onclick="return expand('row1','200px');">expand</a></td>
    </tr>
    <tr id="row2">
       <td>row2a</td>
       <td>row2b</td>
        <td><a href="#" onclick="return expand('row1','300px');"">expand</a></td>
    </tr>
    <tr id="row3">
       <td>row3a</td>
       <td>row3b</td>
        <td><a href="#" onclick="return expand('row1','150px');">expand</a></td>
    </tr>
</table>

Hope that helps.
0

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question