skip to Main Content

I have total of 7 buttons which toggle hide and show of columns. For example, if button 1 is pressed once it will hide column 1 and if button 1 is again pressed it will show column 1 and the rest 6 buttons perform the same operation.

But is it possible that if I click any one button from the 7 buttons it will change the colspan of a heading cell from 15 to 13, if any 2 buttons are clicked it will then change the colspan to 11 and if any 3 buttons are clicked it will then change the colspan to 9. It works fine till colspan 9, but after that it changes to colspan 8 rather than colspan 7. How can I fix this?

  • if any one button is clicked colspan should be 13
  • if any two buttons is clicked colspan should be 11
  • if any three buttons is clicked colspan should be 9
  • if any four buttons is clicked colspan should be 7
  • if any five buttons is clicked colspan should be 5
  • if any six buttons is clicked colspan should be 3
  • if any seven buttons is clicked colspan should be 1

Note: the state of the buttons needs to remain the same even upon page refresh.

Fiddle Link

jQuery($ => {
  let $headings = $('.heading');
  var prevData = [];

  if (localStorage.getItem('prevData')) {
    var prevData = JSON.parse(localStorage.getItem('prevData'));

    if (prevData && prevData.length > 0) {
      prevData.forEach((e) => {
        if (prevData.includes(e)) {
          let $el = $('.col' + e).toggle();
          let colspan = $('table tbody tr:first > td:visible').length / $headings.length + 1;
          $headings.prop('colspan', colspan);
        }
      })
    }
  }

  $('.hide').on('click', e => {
    let $el = $('.col' + e.target.dataset.targetIndex).toggle();

    if (!(prevData && prevData.length >= 0)) {
      prevData = [];
    }

    var prevIndex = prevData.indexOf(e.target.dataset.targetIndex);

    if (prevIndex >= 0) {
      prevData.splice(prevIndex, 1);
    } else {
      prevData.push(e.target.dataset.targetIndex);
    }

    localStorage.setItem('prevData', JSON.stringify(prevData));
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length + 1;
    $headings.prop('colspan', colspan);
  });
});
table,
th,
td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
      <th class="heading" colspan="15">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>


    </tr>

    <tr>
      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      <td class="col7">col7</td>

      <td class="ref">ref</td>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
      
    </tr>

  </tbody>
</table>
<br>

<button class="hide" data-target-index="1">1</button>
<button class="hide" data-target-index="2">2</button>
<button class="hide" data-target-index="3">3</button>
<button class="hide" data-target-index="4">4</button>
<button class="hide" data-target-index="5">5</button>
<button class="hide" data-target-index="6">6</button>
<button class="hide" data-target-index="7">7</button>

4

Answers


  1. I use an array to store the states of all 7 buttons. This makes it’s easy to count how many are toggled on.

    Reminder: you do have some columns in display:none to begin with.

    jQuery($ => {
      let $headings = $('.heading');
      var prevData = [];
      var buttons = [false, false, false, false, false, false, false]  // of booleans
    
      $('.hide').on('click', e => {
        var targetIndex = e.target.dataset.targetIndex
        let $el = $('.col' + targetIndex).toggle();
        buttons[targetIndex-1] = !buttons[targetIndex-1]
        
    
        var len = buttons.filter(item=>item).length;
        var colspan = 15 - len*2;
        $headings.prop('colspan', colspan);
      });
    });
    table,
    th,
    td {
      border: 1px solid black;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <table>
      <thead>
        <tr>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td style="display:none" class="col1">col1</td>
          <td class="col2">col2</td>
          <td style="display:none" class="col2">col2</td>
          <td class="col3">col3</td>
          <td style="display:none" class="col3">col3</td>
          <td class="col4">col4</td>
          <td style="display:none" class="col4">col4</td>
          <td class="col5">col5</td>
          <td style="display:none" class="col5">col5</td>
          <td class="col6">col6</td>
          <td style="display:none" class="col6">col6</td>
          <td class="col7">col7</td>
          <td style="display:none" class="col7">col7</td>
    
    
        </tr>
    
        <tr>
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td style="display:none" class="col1">col1</td>
          <td class="col2">col2</td>
          <td style="display:none" class="col2">col2</td>
          <td class="col3">col3</td>
          <td style="display:none" class="col3">col3</td>
          <td class="col4">col4</td>
          <td style="display:none" class="col4">col4</td>
          <td class="col5">col5</td>
          <td style="display:none" class="col5">col5</td>
          <td class="col6">col6</td>
          <td style="display:none" class="col6">col6</td>
          <td class="col7">col7</td>
          <td style="display:none" class="col7">col7</td>
    
    
        </tr>
    
      </tbody>
    </table>
    <br>
    
    <button class="hide" data-target-index="1">1</button>
    <button class="hide" data-target-index="2">2</button>
    <button class="hide" data-target-index="3">3</button>
    <button class="hide" data-target-index="4">4</button>
    <button class="hide" data-target-index="5">5</button>
    <button class="hide" data-target-index="6">6</button>
    <button class="hide" data-target-index="7">7</button>

    For reference, here’s the original JS code with this implemented.

    jQuery($ => {
        let $headings = $('.heading');
        var prevData = [];
        var buttons = [false, false, false, false, false, false, false]  // of booleans
    
        if (localStorage.getItem('prevData')) {
            var prevData = JSON.parse(localStorage.getItem('prevData'));
    
            if (prevData && prevData.length > 0) {
                prevData.forEach((e) => {
                    if (prevData.includes(e)) {
                        let $el = $('.col' + e).toggle();
                        let colspan = $('table tbody tr:first > td:visible').length / $headings.length + 1;
                        $headings.prop('colspan', colspan);
                    }
                })
            }
        }
    
        $('.hide').on('click', e => {
            var targetIndex = e.target.dataset.targetIndex
            let $el = $('.col' + targetIndex).toggle();
            buttons[targetIndex - 1] = !buttons[targetIndex - 1]
    
            if (!(prevData && prevData.length >= 0)) {
                prevData = [];
            }
    
            var prevIndex = prevData.indexOf(e.target.dataset.targetIndex);
    
            if (prevIndex >= 0) {
                prevData.splice(prevIndex, 1);
            } else {
                prevData.push(e.target.dataset.targetIndex);
            }
    
            localStorage.setItem('prevData', JSON.stringify(prevData));
    
            var len = buttons.filter(item => item).length;
            var colspan = 15 - len * 2;
            $headings.prop('colspan', colspan);
        });
    });
    
    
    Login or Signup to reply.
  2. The issue comes from how you set display:none; interleaved item of the last header

    <td class="ref">ref</td>
    <td class="col1">col1</td>
    <td style="display:none;" class="col1">col1</td>
    <td class="col2">col2</td>
    <td style="display:none;" class="col2">col2</td>
    <td class="col3">col3</td>
    <td style="display:none;" class="col3">col3</td>
    <td class="col4">col4</td>
    <td style="display:none;" class="col4">col4</td>
    <td class="col5">col5</td>
    <td style="display:none;" class="col5">col5</td>
    <td class="col6">col6</td>
    <td style="display:none;" class="col6">col6</td>
    <td class="col7">col7</td>
    <td style="display:none;" class="col7">col7</td>
    

    This cause the query $('table tbody tr:first > td:visible').length make abnormal behavior.

    You should change colSpan calculate formula from:

    let colspan = $('table tbody tr:first > td:visible').length / $headings.length + 1;
    

    to

    let colspan = ($('table tbody tr:first > td:visible').length + 7 - 2 * prevData.length) / $headings.length;
    

    To deal with this unusual case.

    In detail, $('table tbody tr:first > td:visible').length + 7 - 2 * prevData.length, the +7 is get back 7 interleaved item you have set display:none; and - 2 * prevData.length is manual calculate correct
    the number of td:visible.

    jQuery($ => {
      let $headings = $('.heading');
      var prevData = [];
      if (localStorage.getItem('prevData')) {
        var prevData = JSON.parse(localStorage.getItem('prevData'));
        if (prevData && prevData.length > 0) {
          prevData.forEach((e) => {
            if (prevData.includes(e)) {
              let $el = $('.col' + e).toggle();
              let colspan = ($('table tbody tr:first > td:visible').length + 7 - 2 * prevData.length) / $headings.length;
              $headings.prop('colspan', colspan);
            }
          })
        }
      }
      $('.hide').on('click', e => {
        let $el = $('.col' + e.target.dataset.targetIndex).toggle();
        if (!(prevData && prevData.length >= 0)) {
          prevData = [];
        }
        var prevIndex = prevData.indexOf(e.target.dataset.targetIndex);
        if (prevIndex >= 0) {
          prevData.splice(prevIndex, 1);
        } else {
          prevData.push(e.target.dataset.targetIndex);
        }
        localStorage.setItem('prevData', JSON.stringify(prevData));
        let colspan = ($('table tbody tr:first > td:visible').length + 7 - 2 * prevData.length) / $headings.length;
        $headings.prop('colspan', colspan);
      });
    });
    table,
    th,
    td {
      border: 1px solid black;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <table>
      <thead>
        <tr>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td style="display:none" class="col1">col1</td>
          <td class="col2">col2</td>
          <td style="display:none" class="col2">col2</td>
          <td class="col3">col3</td>
          <td style="display:none" class="col3">col3</td>
          <td class="col4">col4</td>
          <td style="display:none" class="col4">col4</td>
          <td class="col5">col5</td>
          <td style="display:none" class="col5">col5</td>
          <td class="col6">col6</td>
          <td style="display:none" class="col6">col6</td>
          <td class="col7">col7</td>
          <td style="display:none" class="col7">col7</td>
    
    
        </tr>
    
        <tr>
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td style="display:none" class="col1">col1</td>
          <td class="col2">col2</td>
          <td style="display:none" class="col2">col2</td>
          <td class="col3">col3</td>
          <td style="display:none" class="col3">col3</td>
          <td class="col4">col4</td>
          <td style="display:none" class="col4">col4</td>
          <td class="col5">col5</td>
          <td style="display:none" class="col5">col5</td>
          <td class="col6">col6</td>
          <td style="display:none" class="col6">col6</td>
          <td class="col7">col7</td>
          <td style="display:none" class="col7">col7</td>
    
    
        </tr>
    
      </tbody>
    </table>
    <br>
    
    <button class="hide" data-target-index="1">1</button>
    <button class="hide" data-target-index="2">2</button>
    <button class="hide" data-target-index="3">3</button>
    <button class="hide" data-target-index="4">4</button>
    <button class="hide" data-target-index="5">5</button>
    <button class="hide" data-target-index="6">6</button>
    <button class="hide" data-target-index="7">7</button>
    Login or Signup to reply.
  3. jQuery($ => {
      let $headings = $('.heading');
      var prevData = [];
    
      if (localStorage.getItem('prevData')) {
        var prevData = JSON.parse(localStorage.getItem('prevData'));
    
        if (prevData && prevData.length > 0) {
          prevData.forEach((e) => {
            let $el = $('.col' + e).toggle();
            let colspan = $('table tbody tr:first > td:visible').length / $headings.length + 1;
            $headings.prop('colspan', colspan);
          })
          if(prevData && prevData.length==1){
            $headings.prop('colspan', 13);
          }else if(prevData && prevData.length==2){
            $headings.prop('colspan', 11);
          }else if(prevData && prevData.length==3){
            $headings.prop('colspan', 9);
          }else if(prevData && prevData.length==4){
            $headings.prop('colspan', 7);
          }else if(prevData && prevData.length==5){
            $headings.prop('colspan', 5);
          }else if(prevData && prevData.length==6){
            $headings.prop('colspan', 3);
          }else if(prevData && prevData.length==7){
            $headings.prop('colspan', 1);
          }else {
            $headings.prop('colspan', colspan);
          }
        }
      }
    
      $('.hide').on('click', e => {
        let $el = $('.col' + e.target.dataset.targetIndex).toggle();
    
        if (!(prevData && prevData.length >= 0)) {
          prevData = [];
        }
    
        var prevIndex = prevData.indexOf(e.target.dataset.targetIndex);
    
        if (prevIndex >= 0) {
          prevData.splice(prevIndex, 1);
        } else {
          prevData.push(e.target.dataset.targetIndex);
        }
    
        localStorage.setItem('prevData', JSON.stringify(prevData));
        let colspan = $('table tbody tr:first > td:visible').length / $headings.length + 1;
        //colspan condition
        if(prevData && prevData.length==1){
          $headings.prop('colspan', 13);
        }else if(prevData && prevData.length==2){
          $headings.prop('colspan', 11);
        }else if(prevData && prevData.length==3){
          $headings.prop('colspan', 9);
        }else if(prevData && prevData.length==4){
          $headings.prop('colspan', 7);
        }else if(prevData && prevData.length==5){
          $headings.prop('colspan', 5);
        }else if(prevData && prevData.length==6){
          $headings.prop('colspan', 3);
        }else if(prevData && prevData.length==7){
          $headings.prop('colspan', 1);
        }else {
          $headings.prop('colspan', colspan);
        }
        
      });
    });
    

    i have made some change when i added comment //colspan condition please check

    Login or Signup to reply.
  4. Using an array of boolean values representing the display state of each column number.

    Adding a click event handler to each button, using its textContent value to determine which columns it applies to. In the click handler function block, locating each column associated with that button and toggle its display state.

    Also calculating the required TH colspan value based on the display state of the first occuring column# associated with that button. Using reduce on the display state array, prevData, and converting false into span 0 columns, and true into span 2 columns. Adding each one returns the total numbered columns needed to span. The colspan total is initiated with the value 1 since that is the minimum colspan value, due to the leading "ref" column before each group.

    Once the colspan is determine, locating and iterating each TH tag and updating its colspan value.

    Finally, updating the column display state array, prevData with the current column display state.

    // set and store default display state of each column#: 1 - 7
    let prevData = [false, false, false, false, false, false, false];
    
    // iterate buttons
    document.querySelectorAll("button").forEach(btn => {
    
      // add click handler
      btn.addEventListener("click", () => {
      
        // locate and iterate columns associated with button
        document.querySelectorAll(".col" + parseInt(btn.textContent)).forEach(col => {
        
          // toggle the display
          col.style.display = ("none" === col.style.display) ? "table-cell" : "none";
        });
        
        // calculate TH colspan based on display status of each column number: 1 - 7
        let csp = prevData.reduce((csp, colhide, idx) =>
          csp + ((null === document.querySelector('.col' +
            (idx + 1) + ':not([style*="display: none;"])')) ? 0 : 2),
          1); // minimum colspan = 1
          
        // locate TH and iterate, assigning updated colspan to each
        document.querySelectorAll(".heading").forEach(hdg => {
          hdg.colSpan = csp;
        });
        
        // store column display state for column# associated with button
        prevData[parseInt(btn.textContent) - 1] =
          (("none" === document.querySelector(".col" + btn.textContent).style.display) ? true : false);
      });
    });
    <table border="1">
      <thead>
        <tr>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="15">abcd</th>
          <th class="heading" colspan="8">abcd</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
    
    
        </tr>
    
        <tr>
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
          <td class="col7">col7</td>
    
          <td class="ref">ref</td>
          <td class="col1">col1</td>
          <td class="col2">col2</td>
          <td class="col3">col3</td>
          <td class="col4">col4</td>
          <td class="col5">col5</td>
          <td class="col6">col6</td>
          <td class="col7">col7</td>
    
    
        </tr>
    
      </tbody>
    </table>
    <br>
    
    <button class="hide" data-target-index="1">1</button>
    <button class="hide" data-target-index="2">2</button>
    <button class="hide" data-target-index="3">3</button>
    <button class="hide" data-target-index="4">4</button>
    <button class="hide" data-target-index="5">5</button>
    <button class="hide" data-target-index="6">6</button>
    <button class="hide" data-target-index="7">7</button>

    Here is the code including localStorage:

    // set and store default display state of each column#: 1 - 7
    let prevData = [false, false, false, false, false, false, false];
    
    // check for localStorage
    if (null !== localStorage.getItem('prevData')) {
      prevData = JSON.parse(localStorage.getItem('prevData'));
      if (prevData && 0 < prevData.length) {
    
        // update columns and calculate colspan from saved data
        let csp = 1;
        prevData.forEach((colhide, idx) => {
    
          // update each column display status
          document.querySelectorAll(".col" + (idx + 1)).forEach(col => {
            col.style.display = (false === colhide) ? "table-cell" : "none";
          });
    
          // increment colspan
          csp += ((false !== colhide) ? 0 : 2);
        });
    
        // locate and iterate TH, assigning colspan
        document.querySelectorAll(".heading").forEach(hdg => {
          hdg.colSpan = csp;
        });
      }
    } 
    
    // if no localStorage, save one
    else {
      localStorage.setItem('prevData', JSON.stringify(prevData));
    }
    
    // iterate buttons
    document.querySelectorAll("button").forEach(btn => {
    
      // add click handler
      btn.addEventListener("click", () => {
      
        // locate and iterate columns associated with button
        document.querySelectorAll(".col" + parseInt(btn.textContent)).forEach(col => {
        
          // toggle the display
          col.style.display = ("none" === col.style.display) ? "table-cell" : "none";
        });
        
        // calculate TH colspan based on display status of each column number: 1 - 7
        let csp = prevData.reduce((csp, colhide, idx) =>
          csp + ((null === document.querySelector('.col' +
            (idx + 1) + ':not([style*="display: none;"])')) ? 0 : 2),
          1); // minimum colspan = 1
          
        // locate TH and iterate, assigning updated colspan to each
        document.querySelectorAll(".heading").forEach(hdg => {
          hdg.colSpan = csp;
        });
        
        // store column display state for column# associated with button
        prevData[parseInt(btn.textContent) - 1] =
          (("none" === document.querySelector(".col" + btn.textContent).style.display) ? true : false);
    
        localStorage.setItem('prevData', JSON.stringify(prevData));
      });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search