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?

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?

• javascript
• jquery
• html-table

• 2 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 Commented Apr 6, 2011 at 14:52
• he want a tutorial or something like this to get started... he has no problem, bt he dont know what to do. – Gergely Fehérvári Commented Apr 6, 2011 at 14:54
• the content of new row and new column also come from server from a datatable ,i want to know the logic how can i start with it. – Anish Commented Apr 6, 2011 at 14:55
• quick and dirty: you have a way to dynamically generate table1. do the same for modtable1. on expand erase table1 add modtable1. on collapse erase modtable1 add table1. optimize later. – Hogan Commented Apr 6, 2011 at 15:00

3 Answers 3

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!

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");
        });
    });

An accordion is a simple, elegant solution: javascript and css.

This fiddle is from the W3Schools explanation above.