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.
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
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:noneto begin with.For reference, here’s the original JS code with this implemented.
The issue comes from how you set
display:none;interleaved item of the lastheaderThis cause the query
$('table tbody tr:first > td:visible').lengthmake abnormal behavior.You should change
colSpancalculate formula from:to
To deal with this unusual case.
In detail,
$('table tbody tr:first > td:visible').length + 7 - 2 * prevData.length, the+7is get back 7 interleaved item you have setdisplay:none;and- 2 * prevData.lengthis manual calculate correctthe number of
td:visible.i have made some change when i added comment //colspan condition please check
Using an array of boolean values representing the display state of each column number.
Adding a click event handler to each button, using its
textContentvalue 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
THcolspanvalue based on the display state of the first occuring column# associated with that button. Usingreduceon the display state array,prevData, and convertingfalseinto span 0 columns, andtrueinto 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
THtag and updating its colspan value.Finally, updating the column display state array,
prevDatawith the current column display state.Here is the code including
localStorage: