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

标签 javascript html jquery

我总共有 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>

最佳答案 

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 条件请检查

关于javascript - 如何使用切换按钮更改 colSpan 的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73748861/

上一篇：haskell - 使用 fix 递归生成斐波那契数列 - 这个例子是如何工作的？

下一篇：python - 如何在 python 类中属性为 True 时阻止方法

相关文章：

创建对象后的 JavaScript 函数

javascript - 在 javascript 中替换 eval() 的正确方法是什么？

javascript - 使用 FormData 上传 JQuery/AJAX 文件，文件未发布

javascript - 对于使用 select 元素(ajax、bootstrap)时的每个问题

javascript - 使用 JS Lettering 不适用于输出文本

css - 更改 <video> 的宽度时，高度没有影响

html - 将输入字段放入图像中

html - 如何将单选按钮保持在表格的同一行

jquery - 如何在订单中执行ajax成功回调？

jQuery Ajax 同步锁

©2024 IT工具网  联系我们