How to change the values of colSpan with toggle buttons

Question

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




  
    
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
    
  
  
    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col2
      col3
      col4
      col5
      col6
      col7


    

    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col2
      col3
      col4
      col5
      col6
      col7

IT goldman · Answer

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




  
    
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
    
  
  
    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7


    

    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

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

HuyPham · Answer

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

ref
col1
col1
col2
col2
col3
col3
col4
col4
col5
col5
col6
col6
col7
col7

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




  
    
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
    
  
  
    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7


    

    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

useriNHz · Answer

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

bloodyKnuckles · Answer

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


  
    
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
      abcd
    
  
  
    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col2
      col3
      col4
      col5
      col6
      col7


    

    
      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col1
      col2
      col2
      col3
      col3
      col4
      col4
      col5
      col5
      col6
      col6
      col7
      col7

      ref
      col1
      col2
      col3
      col4
      col5
      col6
      col7

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

How to change the values of colSpan with toggle buttons

4 Answers