Home/ Questions/Q 8603035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:13:47+00:00

I am trying to create a dynamic html table with retractable columns. In real

  • 0

I am trying to create a dynamic html table with retractable columns.
In real case, I can have 20 columns per header and up to 400 values.
I would like to present the data like this:

-----------------------------------------------------------
|    |            Header 1          | Header 2 | Header 3 |
-----------------------------------------------------------
|val1| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
|val2| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
 ...
-----------------------------------------------------------
|valx| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
|foot| foot1.1| foot1.2|...| foot1.x| foot2.1  | foot3.1  |
-----------------------------------------------------------

I want the ability to click on and colx.1, expand or show all the columns under the same header and collapse (or hide) other columns for other headers.
From the table above clicking on any col2.1 cell would then change the table to :

-----------------------------------------------------------
|    | Header 1 |            Header 2          | Header 3 |
-----------------------------------------------------------
|val1| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
|val2| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
 ...
-----------------------------------------------------------
|valx| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
|foot| foot1.1  | foot2.1| foot2.2|...| foot2.x| foot3.1  |
-----------------------------------------------------------

I have tried to do something like:
use hideable class on all td elements that can be shown/hidden
and to something like:

var rows = $('tr');
rows.find('th:eq(1), td:eq(1)').on('click', function() {
    $('.hideable').toggle()
});

I also need to change the colspan of headers and footers accordingly with 

('th#foot1.1').attr('colspan',1)

The above solution works but is very inefficient and does not seem very clean.

Added simplified jsFiddle sample jsfiddle.net/yrMsX. The idea would be not to have header 1 and 2 expanded at the same time.

Is there a better, more effective way to achieve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I made this fiddle hope is what you were looking for.

    Basically you should focus on this:

    • give the header and its sub cols same class
    • set colspan attribute for those headers you want to toggle
    • set a data-fullcol attribute to each header to keep track of their maximum colspan
    • bind to click event only those columns with colspan attribute
    • give a first class to those columns you want to stay visible
    • on click event hide all columns whose class doesn’t equal the one of the clicked header and haven’t also a first class
    • sett all other headers colspan to 1
    • toggle all the columns with same class as the header you clicked one
    • to toggle the header’s colspan set colspan to (data-fullcol – colspan +1)

    NB : this will only work if headers have single classes, if you want to give ’em more than one class, consider saving the ‘important class’ in a specific attribute like data-class

    • 0