数据表根据列值隐藏行答案

【问题标题】：Datatable hide rows based on column value数据表根据列值隐藏行
【发布时间】：2018-09-30 01:30:17
【问题描述】：

我有这个由 php 动态生成的数据表。但是一旦加载，我想隐藏状态为 Pending 的整行。我已将“cls_status”类添加到每个 tr 的最后一个 td，所以我想隐藏最后一个 td 状态为 Pending 的 tr。

在下面的示例中，一旦加载了 html，我只想显示 2 行。

<table class="table dataTable no-footer" id="activitytabdata" role="grid">
    <thead>
      <tr role="row">
      <th>Date</th>
      <th>Activity Name</th>
      <th>Points Earned</th>
      <th>Expiry Date</th>
      <th>Status</th>
  </tr>          
    </thead>
    <tbody id="reward-data">
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Earned</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Earned</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Pending</td>
        <td class="cls_points">30.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Pending</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Expired</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Expired</td>
    </tr>
</tbody>

【问题讨论】：

最好的办法是从 PHP 中过滤掉，因为如果有数千个而一半不需要。

标签： javascript datatables

【解决方案1】：

请检查此解决方案并根据您的需要进行更新：

window.onload = function() {
var table = document.getElementById("activitytabdata");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     if(col.innerText == "Pending"){
        row.style="display:none;";
             console.log(col.innerText);
     }

   }  
}
};

<table class="table dataTable no-footer" id="activitytabdata" role="grid">
    <thead>
      <tr role="row">
      <th>Date</th>
      <th>Activity Name</th>
      <th>Points Earned</th>
      <th>Expiry Date</th>
      <th>Status</th>
  </tr>          
    </thead>
    <tbody id="reward-data">
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Earned</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Earned</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Pending</td>
        <td class="cls_points">30.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Pending</td>
    </tr>
    <tr role="row" class="odd">
        <td align="left" class="cls_date">Mar 28, 2018</td>
        <td class="cls_activity">Points Expired</td>
        <td class="cls_points">10.00</td>
        <td class="cls_expire_date">Mar 28, 2018</td>
        <td class="cls_status">Expired</td>
    </tr>
</tbody>

【讨论】：

【解决方案2】：

以下是您的选择：

使用 javascript 查找要隐藏的节点，然后将具有 display:none 的类应用于它们。 this is how you find the text
使用 php 向所有“待定”行添加一个类，然后使用 css 隐藏该类。
如果您刚开始编写前端代码，那么框架就是为了让这样的事情变得简单。试试 React 或 Angular。

【讨论】：