Amra Amra - 9 months ago 53
jQuery Question

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

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.

<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>
<td><a href="#"/>6</td>
<td><a href="#"/>7</td>
<td><a href="#"/>8</td>
<td><a href="#"/>9</td>

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)

Answer Source

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" "">
<html xmlns="" lang="en" xml:lang="en">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
            $('table tr:first td a').click(function(){
                $(this).parents('tr:first').find('td[rowspan]').attr('rowspan', 1);

<table border="1">
        <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>
        <td><a href="#">6</a></td>
        <td><a href="#">7</a></td>
        <td><a href="#">8</a></td>
        <td><a href="#">9</a></td>