Solved

Apply style to table row when link is clicked

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

615 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