Solved

Apply style to table row when link is clicked

Posted on 2007-12-06
1
1,096 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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Summernote and form validation 10 36
Compare site how does it work 4 48
Paper tearing animation 6 37
Hovering effect 9 27
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now