【问题标题】:Filter table using values in specific column使用特定列中的值过滤表
【发布时间】:2016-12-24 21:02:02
【问题描述】:

我正在尝试使用 javascript 过滤表以仅显示具有超过 5 个播种机的行。这是一个带有表格示例的 JSFiddle 链接。

http://jsfiddle.net/xQB4Z/566/

一行示例:

<td align=left width=500><NOBR><a href="download.php?id=1241487&SSL=1"><img style="position: relative; top: 2px;" src="themes/classic/pic/download.gif.pagespeed.ce.6SI31hDpjb.gif" border="0"></a>&nbsp;<a class="index" href="details.php?id=1241487&amp;hit=1">CENTOS 4</a> (<b><font color="red">NEW!</font></b>)</NOBR><br/><font size=1 color='666666'><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Uploaded 13 m, 44 seconds after pre</i></font></td>
<td align="right"><b><a href="details.php?id=1241487&amp;hit=1&amp;filelist=1">78</a></b></td>
<td align="right">0</td>
<td align=center><nobr>2016-08-17<br/>23:23:27</nobr></td>
<td align=center>----</td>
<td align=center>6.64<br/>GB</td>
<td align=center>----</td>
<td align="right"><span class="green">2</span></td>
<td align="right"><span class="green">2</span></td>
</tr>

【问题讨论】:

    标签: javascript html filter html-table


    【解决方案1】:

    这里有一些简单的东西可以帮助您入门:

    var rows = document.getElementById("yourTableId").querySelectorAll("tr");
    
    for (var i = 1; i < rows.length; i++) { // start at row 1 to skip header
      if (+rows[i].cells[8].textContent <= 5)
        rows[i].style.display = "none";
    }
    

    演示:http://jsfiddle.net/xQB4Z/568/

    注意:我给了你的桌子一个 id。您可以改为使用 document.querySelector("table") 来获取页面上的第一个表格。

    【讨论】:

    • 如何在有两个表的页面上使用“document.querySelector("table")”,例如jsfiddle.net/ajm0e4xk/7
    • document.querySelector("table") 将选择页面上的第一个表格。如果你想要第二个表,你可以使用document.querySelectorAll("table")[1](其中方括号中的数字是从零开始的索引 - 并注意在函数名称中添加All)。但是,如果您要从 JS 中引用它们,最好给它们提供 ID,以便在页面布局发生变化时代码不会中断。
    【解决方案2】:

    你可以这样做:

    Array.from(document.querySelectorAll("tr")).forEach(function(v, k){
        var seeders = v.querySelectorAll("td")[8].textContent;
        if(seeders < 5){
            v.style.display = "none";
        }
    });
    

    这将检查每行中第 9 列的内容,如果该列中的值小于 5,则隐藏该行。

    DEMO

    【讨论】:

    • 感谢您的回答,当我向页面添加另一个元素时,它似乎破坏了代码。你能再帮我一次吗? jsfiddle.net/ajm0e4xk
    • @JamiePeregrym v.querySelectorAll("td")[8] 表示第 9 列,只需将 [8] 更改为该列的位置减 1。
    猜你喜欢
    • 1970-01-01
    • 2021-05-22
    • 2016-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-26
    • 2023-03-29
    相关资源
    最近更新 更多