Expand / Collapse HTML Tables

Question

I have an HTML table which is generated dynamically from server.

I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.

I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.

Can you help me or provide any info on how can I do this?

Answer 1

Ok I think the question is too vague to be answered completely if you think about.

Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? ^{David Thomas comment.}

If you don't want to use a jQuery plugin like this one it means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.

That said here is a quick and dirty example of what your approach should be like.

HTML

<table border="1">
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
</table>

jQuery

$(".clickable").click(function() {

    $(this).next().toggle();

});

As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.

I can update the answer with a better more personalized answer if you update your question.

But if you want to build it yourself, this are some of this could come in handy:

.show()
.hide()
.toggle()
.animate()
:nth-child
.children()

And many other depending on your approach.

Good luck!

Answer 2

Here is a quick example, I hope It helps if I understood your question correctly.

With this structure:

 <a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
    <thead>
        <tr>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
    </tbody>
</table>

Maybe you could do something like this:

  $(document).ready(function () {
        $(".expand").click(function () {
            $("#mytable tbody").show("slow");
        });
        $(".collapse").click(function () {
            $("#mytable tbody").hide("fast");
        });
    });