CODEWITHSUNDEEP
jquerycoding-stylehtml-table
Amra
Amra

Reputation: 25180

Rowspan when <a> element is clicked with Jquery?

I was trying to get this with divs and css, but I was advice to do it with JQuery and tables instead.

The case is that I am trying to make a two rows table with 5 cells in first row and 4 on second.

When you click on one of the <a> inside of the cells on the top, that cell will span the row and change background-image, taking the correspondent space between the cells below.

Default state.

<table>
 <tr>
   <td><a href="#" rowspan="2"/>1</td>
   <td><a href="#"/>2</td>
   <td><a href="#"/>3</td>
   <td><a href="#"/>4</td>
   <td><a href="#"/>5</td>
 </tr>
  <tr>
   <td><a href="#"/>6</td>
   <td><a href="#"/>7</td>
   <td><a href="#"/>8</td>
   <td><a href="#"/>9</td>
</tr>

how should it look by default

______________________________________
|      |_______|_______|______|______|
|______|_______|_______|______|______|

how should it look if any of second row is selected.

______________________________________
|______|_______|________|______|______|
   |_______|_______|________|_______|

What I am trying to do its a two row tab menu so when the user select any tab from the first row the image of the tab will e get longer, taking the space of the missing cell bellow.

Sorry to all, of course if it is a lot of work do not bother, I don't know how much work this would involve as I don't know anything about JQuery, thanks anyway for looking.

I am in a rush to get this done and if I stop to learn JQuery now I may get told off, that is why I am looking for a quick solution ( I know it sounds terrible, but I can spend the time right now)

Upvotes: 1

Views: 1786

Answers (1)

Markus Hedlund
Markus Hedlund

Reputation: 24254

I think this does what you ask. But I don't know how this would do anything for you :) so maybe I've misunderstood you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>SO</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('table tr:first td a').click(function(){
                $(this).parents('tr:first').find('td[rowspan]').attr('rowspan', 1);
            });
        });
    </script>
</head>
<body>

<table border="1">
    <tr>
        <td rowspan="2"><a href="#">1</a></td>
        <td><a href="#">2</a></td>
        <td><a href="#">3</a></td>
        <td><a href="#">4</a></td>
        <td><a href="#">5</a></td>
    </tr>
    <tr>
        <td><a href="#">6</a></td>
        <td><a href="#">7</a></td>
        <td><a href="#">8</a></td>
        <td><a href="#">9</a></td>
    </tr>
</table>

</body>
</html>

Upvotes: 2

Related Questions