javascript - 如何使用切换按钮更改 colSpan 的值

Question

我总共有 7 个按钮来切换列的隐藏和显示。例如，如果按下按钮 1 将隐藏第 1 列，如果再次按下按钮 1 将显示第 1 列，其余 6 个按钮执行相同的操作。

但是否有可能如果我单击 7 个按钮中的任何一个按钮，它会将标题单元格的 colspan 从 15 更改为 13，如果单击任何 2 个按钮，它会将 colspan 更改为 11，如果有任何 3单击按钮，然后将 colspan 更改为 9。它在 colspan 9 之前工作正常，但之后它更改为 colspan 8 而不是 colspan 7。我该如何解决这个问题？

• 如果点击任何一个按钮，colspan 应该是 13
• 如果点击任意两个按钮，colspan 应该是 11
• 如果点击了任意三个按钮，colspan 应该是 9
• 如果点击了任意四个按钮，colspan 应该是 7
• 如果点击了任意五个按钮，colspan 应该是 5
• 如果单击任意六个按钮，colspan 应为 3
• 如果点击任意七个按钮，colspan 应该为 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 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>

Answer 1

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

我在添加评论时做了一些更改//colspan 条件请检查