首页 / 技术问答 / Javascript问答列表 / 问答详情

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

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

但有没有可能，如果我点击7个按钮中的任何一个按钮，它会将标题单元格的跨度从15更改为13，如果单击任何2个按钮，则会将跨度更改为11，如果单击任何3个按钮，则会将跨度更改为9.它在跨度9之前运行良好，但之后它会更改为跨度8，而不是跨度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);
    }
    
  });
});

我在添加 comments 时做了一些更改//colspan条件请判断

Javascript相关问答推荐

为什么子组件没有在reaction中渲染？

调用SEARCH函数后，程序不会结束

无法将nPM simplex-noise包导入在JS项目中工作

使用AJX发送表单后，$_Post看起来为空

Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做？

在Angular中将样式应用于innerHTML

为什么ngModel不能在最后一个版本的Angular 17上工作？'

如何在不创建新键的情况下动态更改 map 中的项目？

如何使覆盖div与可水平滚动的父div相关？

自定义高图中的x轴标签序列

setcallback是什么时候放到macrotask队列上的？

优化Google Sheet脚本以将下拉菜单和公式添加到多行

ChartJs未呈现

在运行时使用Next JS App Router在服务器组件中运行自定义函数

闭包是将值复制到内存的另一个位置吗？

MarkLogic-earch.suggest不返回任何值

固定动态、self 调整的优先级队列

需要刷新以查看Mern堆栈应用程序中的更改

将以前缓存的 Select 器与querySelector()一起使用

如何用react组件替换dom元素？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630