Solved

Apply style to table row when link is clicked

Posted on 2007-12-06
1
1,102 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
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

830 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