Question

如何将整列分成几个部分：

我最终想要实现的是使用javascript基于按钮显示/隐藏列部分。

代码：

<table>
  <tr>
    <th>Number</th> <!-- This column is meant to be shown -->   
    <th>Shown Content</th>    <!-- This column is meant to be shown --> 
    <th>Hidden Content</th>    <!-- This column is meant to be hidden -->
    <th>Action</th> <!-- This column is meant to be shown -->   
  </tr>

  <tr>
    <td>1</td>          <!-- This column is meant to be shown -->   
    <td>Shown</td>      <!-- This column is meant to be shown -->
    <td>Hidden</td>     <!-- This column is meant to be hidden -->
    <td><form action='action'><button>VIEW</button></form></td> <!-- This column is meant to be shown -->
  </tr>

</table>

Answer 1

说明：

点击按钮，调用切换功能
假设您传递给它的任何参数都是列号;如果您有其他要求（如一系列数字），则需要修改
使用nth-child您可以选择所提供列号的标题和数据元素
查看第一个，看看它是否已隐藏。这是在循环之外执行的，因为您不需要检查每个元素，只需要检查一个，因为您将类应用于所有元素
获得数据集（存储在col）后，迭代它们并添加或删除该类。 CSS负责隐藏

注意事项：

此代码严重依赖ES6，可以转换，但您应该特别小心：

箭头功能（=>）
字符串插值的反引号（`${variable}`）
数组传播运算符[...obj]

＆＃13;

function toggle() {
  let className = 'hidden';
  [...arguments].forEach(num => {

    var selector = `th:nth-child(${num}), td:nth-child(${num})`,
      col = document.querySelectorAll(selector),
      add = !col[0].classList.contains(className);

    col.forEach(td => {
      add ? td.classList.add(className) : td.classList.remove(className);
    });
  });
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<table>
  <tr>
    <th>Number</th>
    <!-- This column is meant to be shown -->
    <th>Shown Content</th>
    <!-- This column is meant to be shown -->
    <th>Hidden Content</th>
    <!-- This column is meant to be hidden -->
    <th>Action</th>
    <!-- This column is meant to be shown -->
  </tr>

  <tr>
    <td>1</td>
    <!-- This column is meant to be shown -->
    <td>Shown</td>
    <!-- This column is meant to be shown -->
    <td>Hidden</td>
    <!-- This column is meant to be hidden -->
    <td>
      <form action='action'><button>VIEW</button></form>
    </td>
    <!-- This column is meant to be shown -->
  </tr>

</table>

<button onclick="toggle(1,3)">Toggle</button>

＆＃13;

Answer 2

一行jQuery

$("#hide").on("click", function() {
  //hide third column with header, you can add more columns if you wish
  $('td:nth-child(3),th:nth-child(3)').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Number</th>
    <!-- This column is meant to be shown -->
    <th>Shown Content</th>
    <!-- This column is meant to be shown -->
    <th>Hidden Content</th>
    <!-- This column is meant to be hidden -->
    <th>Action</th>
    <!-- This column is meant to be shown -->
  </tr>

  <tr>
    <td>1</td>
    <!-- This column is meant to be shown -->
    <td>Shown</td>
    <!-- This column is meant to be shown -->
    <td>Hidden</td>
    <!-- This column is meant to be hidden -->
    <td>
      <form action='action'><button>VIEW</button></form>
    </td>
    <!-- This column is meant to be shown -->
  </tr>

</table>

<button id="hide">Hide Third Column</button>

Answer 3

这表示/隐藏特定行中的列

function toggle(){
  var header = document.getElementById('headerHide');
  var parent = document.getElementById('first');
  var sub = parent.querySelector('#hide');
  var btn = parent.querySelector('#btn');
  
  if(sub.style.display == 'none'){
    sub.style.display = 'block';
    header.style.display = 'block';
    btn.innerHTML = "HIDE";
  }
  else{
    sub.style.display = 'none';
    header.style.display = 'none';
    btn.innerHTML = "VIEW";
  }
}

<table>
  <tr>
    <th>Number</th> <!-- This column is meant to be shown -->   
    <th id="headerShow">Shown Content</th>    <!-- This column is meant to be shown --> 
    <th id="headerHide" style="display:none;">Hidden Content</th>    <!-- This column is meant to be hidden -->
    <th>Action</th> <!-- This column is meant to be shown -->   
  </tr>

  <tr id="first">
    <td>1</td>          <!-- This column is meant to be shown -->   
    <td id="show">Shown</td>      <!-- This column is meant to be shown -->
    <td id="hide" style="display:none;">Hidden</td>     <!-- This column is meant to be hidden -->
    <td><form action='something' style='display:inline'><button onclick="toggle()" id="btn">VIEW</button></form></td> <!-- This column is meant to be shown -->
  </tr>

</table>

将列拆分为多个部分

3 个答案: