Question

I am dynamically creating an HTML table by using a repeater. I have four columns that I fill with some company data and what I want to do is to be able to click on a row and add another row with a google map and some more data in another repeater. When I click on the row again I collaps the extra row and I can click on another customer row.

My first repeater:

<asp:Repeater ID="rptSearchByNameResult" runat="server">
        <HeaderTemplate>
        <table id="Result">
            <thead>
                <tr>
                    <th></th>
                    <th>VAT No</th>
                    <th>Entity Name</th>
                    <th>Location</th>
                </tr>
            </thead>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td class="expandResult" title="Click for more information">&#43;</td>
                <td class="vat"><%# Eval("VAT.identifierValue")%></td>
                <td class="vat">
                    <%# Eval("Name.organisationName")%>
                    <%# Eval("Name.fullName")%>
                    <%# Eval("Name.tradingName")%>
                    <%# Eval("Name.primaryName")%>
                </td>
                <td class="location">
            <%# String.Format("{0} {1}", Eval("location.postCode"), Eval("location.stateCode")) %>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
        </table>
        </FooterTemplate
 </asp:Repeater>

and my google map after (which I hide/show with a click event on expandResult class).

        </div>
            <div id="map_canvas"/>
        </div>

As you can see I show the map at the bottom of the result which is not ideal when the list is very long so I want to show it (and the other repeater) betweeen rows. How should I do this? I know how to insert a new row with jQery but the table has four columns and I want the extra row to only have two. Must I then break the table and insert a div instead and start a new table just after with the rest of the data? Skip tables altogether? I would like to keep tables though for sorting purposes.

Any example on where this is done elsewhere?

Thanks in advance.

Answer 1

How about using colspan ? .. You can combine using the colspan attribute in your . Something like this would work for you

<tr>
<td colspan="4"><div>Your map goes and it will take the whole space </div></td>
</tr>