CODEWITHSUNDEEP
htmlcss
kakebake
kakebake

Reputation: 108

How to make a table row jump in?

i'm working on a webpage which is going to contain a list of weekly transactions.

The way I want it to work is to have a list of transaction and when you click it, more detailed information for that week will be presented just below it.

I want it to be presented like a table, but I want the detailed information to jump in like this: enter image description here

So when I click the third row the detailed information is shown like this. The specific problem I have is to make the detailed rows jump in.

Any idea is greatly appreciated.

Upvotes: 0

Views: 792

Answers (1)

Rafael Marcos
Rafael Marcos

Reputation: 252

I think you can use other table inside of a TD with Colspan, of the TR down. You can use CSS to create the border.

For example:

<table style="border:1px solid #000; border-collapse:collapse;">
    ..
    <tr>
            <Td>Info 2 1 </Td>
            <Td>Info 2 2 </Td>
            <Td>Info 2 3 </Td>
            <Td>Info 2 4 </Td>
    </tr>
    <tr>
            <td  style="border:0px solid #FFF;">
                 <table style="border:0 0 0 50px; border:1px solid #000; border-collapse: collapse;">
                     <tr>
                          <td>Detail title 1</td>
                          <td>Detail title 2</td>
                          <td>Detail title 3</td>
                     </tr>
                 </table>
            </td>
    </tr>
    <tr>
            <td>Info 2 1 </td>
            <td>Info 2 2 </td>
            <td>Info 2 3 </td>
            <td>Info 2 4 </td>
    </tr>
    ..
<table>

To create dynamically this internal table, you can use the comand "After" of Jquery. For example:

$('#TR_Selected').after('<tr><td colspan="4"><table> ...</table></td></tr>');

Upvotes: 1

Related Questions