Apply style to table row when link is clicked

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
LVL 1
Rocker4500Asked:
Who is Participating?
 
bdichiaraCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.