JQuery Expand Table - adding additional columns

Question

I'm using JExpand and allow me to expand additional rows in a table. I'd like these expandable rows to include additional columns compared to the original table.

The code for the table I'm using is : Example Fiddle : http://jsfiddle.net/sB5g9/1/

<body>
    <table id="results" >
        <tr>
            <th>Select</th>
            <th>Population</th>
            <th>Area</th>
            <th>Official languages</th>
            <th>Other</th>
        </tr>
        <tr>
            <td><select name='mode[]' class='mode' /><option value='0:0'></option><option value='1:0'>View</option><option value='2:0'>Additional</option></select></td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
            <td>English</td>
        </tr>
        <tr style="background-color:#FFF">  <!-- hidden -->
                    <td><b>Additional Settings</b></td>
                    <td>306,939,000</td>
                    <td>9,826,630 km2</td>
                    <td>English</td>
                    <td>English</td>
        </tr>   <!-- hidden -->
        <tr>
            <td><select name='mode[]' class='mode' /><option value='0:0'></option><option value='1:0'>View</option><option value='2:0'>Additional</option></select></td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
            <td>English</td>
        </tr>
        <tr style="background-color:#FFF">  <!-- hidden -->
                    <td><b>Additional Settings</b></td>
                    <td>306,939,000</td>
                    <td>9,826,630 km2</td>
                    <td>English</td>
                    <td>English</td>
        </tr>   <!-- hidden -->
        <tr>
            <td><select name='mode[]' class='mode' /><option value='0:0'></option><option value='1:0'>View</option><option value='2:0'>Additional</option></select></td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
            <td>English</td>
        </tr>
        <tr style="background-color:#FFF">  <!-- hidden -->
                    <td><b>Additional Settings</b></td>
                    <td>306,939,000</td>
                    <td>9,826,630 km2</td>
                    <td>English</td>
                    <td>English</td>
        </tr>   <!-- hidden -->

   </table>
</body>

What I currently have is shown below. When you select additional the row is shown and it has the same number of columns as the original table. This can bee seen in the red highlight.

What I would like is to have more columns in the expanded rows as can be seen in the yellow highlight example...

Example

Any idea how I can do this? The expandable rows may include table text fields, dropdown lists etc..

JeffVader · Accepted Answer · 2013-12-22 17:22:04Z

1

When I had a similar requirement I used colspan and rowspan

answered Dec 22, 2013 at 17:22

JeffVader

6942 gold badges17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Expand Table - adding additional columns

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related