How to change the values of colSpan with toggle buttons-CodePudding

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

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  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >ref</td>
      <td >col1</td>
      <td >col1</td>
      <td >col2</td>
      <td >col2</td>
      <td >col3</td>
      <td >col3</td>
      <td >col4</td>
      <td >col4</td>
      <td >col5</td>
      <td >col5</td>
      <td >col6</td>
      <td >col6</td>
      <td >col7</td>
      <td >col7</td>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </tr>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </tr>

  </tbody>
</table>
<br>

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

CodePudding user response：

The issue comes from how you set display:none; interleaved item of the last header

<td >ref</td>
<td >col1</td>
<td style="display:none;" >col1</td>
<td >col2</td>
<td style="display:none;" >col2</td>
<td >col3</td>
<td style="display:none;" >col3</td>
<td >col4</td>
<td style="display:none;" >col4</td>
<td >col5</td>
<td style="display:none;" >col5</td>
<td >col6</td>
<td style="display:none;" >col6</td>
<td >col7</td>
<td style="display:none;" >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;

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  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >ref</td>
      <td >col1</td>
      <td >col1</td>
      <td >col2</td>
      <td >col2</td>
      <td >col3</td>
      <td >col3</td>
      <td >col4</td>
      <td >col4</td>
      <td >col5</td>
      <td >col5</td>
      <td >col6</td>
      <td >col6</td>
      <td >col7</td>
      <td >col7</td>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </tr>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </tr>

  </tbody>
</table>
<br>

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

CodePudding user response：

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  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
      <th  colspan="15">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >ref</td>
      <td >col1</td>
      <td >col1</td>
      <td >col2</td>
      <td >col2</td>
      <td >col3</td>
      <td >col3</td>
      <td >col4</td>
      <td >col4</td>
      <td >col5</td>
      <td >col5</td>
      <td >col6</td>
      <td >col6</td>
      <td >col7</td>
      <td >col7</td>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </tr>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    </tr>

  </tbody>
</table>
<br>

<button  data-target-index="1">1</button>
<button  data-target-index="2">2</button>
<button  data-target-index="3">3</button>
<button  data-target-index="4">4</button>
<button  data-target-index="5">5</button>
<button  data-target-index="6">6</button>
<button  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);
    });
});