Expand / collapse HTML tables

Question

I have an HTML table that is dynamically generated from the server.

I want to have an extension / crash in this html table, when I click on the extension, I have to get a new column and rows, and when it crashes, it should be what it was before.

I do not want to use a third-party plugin for it. I want to use jQuery and Ajax.

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

Answer 1

Good. I think this question is too vague to get a complete answer if you think.

Where is the contents of the new columns and rows? What is your structure? What have you tried? What didn’t work? ^{David Thomas comment.}

If you do not want to use the jQuery plugin, for example this one , this means that you will need to do it yourself and a) no one here will do it for you completely b) much less, without any information that will just be guessing.

This is a quick and dirty example of what your approach should look 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, just an example , it does not scale (it does not even support hiding two lines), you can see here .

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

But if you want to create it yourself, here are some of them that may come in handy:

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

And many others, depending on your approach.

Good luck

Answer 2

Here is a brief example, I hope this 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> 

Perhaps you could do something like this:

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

Answer 3

Accordion is a simple, elegant solution: javascript and css.

This script is from the W3Schools explanation above.