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。

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

编辑：API传递了一个包含内容的JSON对象，因此我不知道表格或内容的大小。

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

Answer 1

这是一个帮助您入门的基本示例。请注意，我正在使用一种非常天真的方法来识别表格单元格（尽管它确实有效，但实际上我已经在CSS标识符成为常态之前使用了这种技术）。

单击顶部的蓝色方块，它将隐藏第1列。如果更改代码以查找c2，它将隐藏第2列。依此类推。您可以通过这种方式查看如何在网格中选择和隐藏/显示/样式。

<html>
    <head>
    </head>
    <body>
        <script>
            function onClick() {
                var tds = document.getElementsByTagName ( 'td' );
                var arr = Array.from ( tds );
                console.log ( arr );
                arr.forEach ( function ( d ) {
                    if ( d.id.indexOf ( 'c1' ) !== -1 ) {
                        d.style.display = 'none';
                    }
                });
            }
        </script>

        <div style="width: 50px; height: 50px; background-color: blue; color: white"
             onclick="onClick()">
            Click Me
        </div>

        <table border="1px">
            <tr>
                <td id="c1_r1">
                    C1_R1
                </td>
                <td id="c2_r1">
                    C2_R1
                </td>
                <td id="c3_r1">
                    C3_R1
                </td>
            </tr>
            <tr>
                <td id="c1_r2">
                    C1_R2
                </td>
                <td id="c2_r2">
                    C2_R2
                </td>
                <td id="c3_r2">
                    C3_R2
                </td>
            </tr>
            <tr>
                <td id="c1_r3">
                    C1_R3
                </td>
                <td id="c2_r3">
                    C2_R3
                </td>
                <td id="c3_r3">
                    C3_R3
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 2

您需要找到每个td的{{1}}子项，并根据索引将该类应用于每个。

＆＃13;

tr

＆＃13;

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

＆＃13;

.hide{color:red}

＆＃13;

Answer 3

您可以相对轻松地执行此操作w / querySelectorAll以及类似的内容（此操作未选中）：

let pageSize = 3;
let currentPage = 1; // 1st page

// querySelector method
const getStrQueryForPageRows = function(pageNumber, pageSize=3) {
    let idx = pageSize * (pageNumber - 1);
    return `tr:nth-child(n+${idx}):nth-child(-n+${idx+pageSize})`;
}
const hideColumnOnMyTablePage = (columnNumber, pageNumber) => {
    return document.querySelector('#myTable')
        .querySelectorAll(`${getStrQueryForPageRows(pageNumber)} td:nth-child(${col - 1})`)
        .forEach(col => col.classList.add('hide'))
}

hideColumnOnMyTablePage(2, currentPage) // hide second col of page 1

还有桌面道具可以帮助你

// alt way to grab rows for page
const getMyTableRowsForPage = (pageNumber, pageSize = 3) => {
   let end = pageSize * (pageNumber);
   let start = end - pageSize;
   return [...document.querySelector('#myTable').tBodies[0].rows].slice(start, end);
}

（没有框架 - 普通的JS）用JS来分析API

3 个答案: