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>
Advertisement
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