Javascript （无框架-纯JS）使用JS对从API提取的表进行分页 函数列分页（输入）{ var table=document.getElementById（“tablePrint”）； var tcolumns=table.getElementsByTagName（“th”）； 对于（变量i=1；i输入）{ tcolumns[i].classList.add（'hide'）； }否则{ t列[i].classList.remove（'hide'）； } } }

上面是我的

列分页

函数。我有一些按钮可以调用它并提供输入。因此，它首先呈现所有内容，然后允许用户在之后过滤表。现在发生的是，它只隐藏标题，而不隐藏列中的其余单元格。我想让它隐藏整个专栏

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

另外，我没有使用React或Angular，因为我只知道如何使用框架构建东西，而不知道实际发生了什么

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

---

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

这里有一个基本的例子可以帮助您开始。请注意，我使用的是一种非常简单的方法来识别表单元格（虽然它确实有效，但在CSS标识符成为标准之前，我实际上已经使用了很多这种技术）

单击顶部的蓝色方形，它将隐藏第1列。如果更改代码以查找c2，它将隐藏第2列。等等您可以看到如何以这种方式选择和隐藏/显示/设置网格中的任何内容

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');
        }
    }
}

函数onClick（）{
var tds=document.getElementsByTagName（'td'）；
var arr=Array.from（tds）；
console.log（arr）；
arr.forEach（功能（d）{
如果（d.id.indexOf（'c1'）！=-1）{
d、 style.display='none'；
}
});
}
点击我
C1_R1
C2_R1
C3_R1
C1_R2
C2_R2
C3_R2
C1_R3
C2_R3
C3_R3

您需要找到每个

tr

的

td

子级，并将基于索引的类应用于每个子级

函数切换类（元素、类名、toSet）{
element.classList[toSet？'add'：'remove']（类名称）；
}
函数列分页（输入）{
var table=document.getElementById（“tablePrint”），
dataRows=table.getElementsByTagName（'tr'）；
对于（var i=0；i

.hide{color:red}

总目1
总目2
总目3
1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
4.1
4.2
4.3

您可以相对轻松地执行此操作，方法是使用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

---

如果可能的话，分享屏幕截图。只是一个想法，但是你不能简单地按行而不是列分页吗？这适合你的用例吗？我当然想知道裸机，而不是使用框架，但是如果你要做这种高级选择/修改，我会使用JQuery。这使这类事情变得容易多了。也就是说，如果我理解这个问题，您只想能够隐藏一列。我可能会和我在这里看到的有所不同。我将快速创建一个“仅JS”示例。在Ulkuest93中，我将在下一个问题中添加一个屏幕截图！已经解决了@Todd Yup，我需要为这个特定用例按列分页。真的！谢谢你的帮助。谢谢你的帮助！谢谢：）表不必是常量，您可以通过JavaScript或您正在使用的任何后端技术生成它。您需要做的唯一一件事是，在该脚本中，使用某种方式命名/标记单元格，以便可以选择稍后要操作的单元格。我通常使用“rN_cN”，但任何一致的方法都可以。否则，编写的脚本将在任何大小的表上运行（同样，只要可以以某种方式选择它）。

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);
}