javascript - (无框架 - 纯 JS)使用 JS 对从 API 中提取的表进行分页

Question

function columnPagination(input){
    var table = document.getElementById("tablePrint");
    var tcolumns = table.getElementsByTagName("th");
    for (var i = 1; i < tcolumns.length; i++){
        td = tcolumns[i].getElementsByTagName("td")[0].selectColumn;
        if(i > input){
            tcolumns[i].classList.add('hide');
        }else{
            tcolumns[i].classList.remove('hide');
        }
    }
}

上面是我的columnPagination 函数。我有调用它并提供输入的按钮。所以它首先呈现所有内容，然后允许用户在之后过滤表格。现在发生的事情是它只隐藏标题而没有列中的其余单元格。我希望它隐藏整个列。

是否有一些 CSS 或其他我没有想过要使用的东西。

附言我没有使用 React 或 Angular，因为我只知道如何使用框架构建东西，但我真的不知道实际发生了什么。

编辑:API 向我传递了一个包含内容的 JSON 对象，所以我不知道表格的大小或内容。

感谢大家的帮助!很多有用的答案。

Answer 1

您需要找到每个 tr 的 td 子级，并将基于索引的类应用到每个子级。

function toggleClass(element, className, toSet) {
  element.classList[toSet ? 'add' : 'remove'](className);
}

function columnPagination(input) {
  var table = document.getElementById("tablePrint"),
      dataRows = table.getElementsByTagName('tr');

  for (var i = 0; i < dataRows.length; i++) {
    var cells = dataRows[i].children;
    for (var cell = 0; cell < cells.length; cell++) {
      toggleClass(cells[cell], 'hide', cell == input)
    }
  }
}

columnPagination(1) // 0-based index

.hide{color:red}

<table id="tablePrint">
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td>4.2</td>
      <td>4.3</td>
    </tr>
  </tbody>
</table>