Question

我有这个由php动态生成一次的数据表。但是一旦加载完毕，我想隐藏状态为待处理的整行。我在每个tr的最后一个td中添加了“ cls_status”类，因此我想隐藏最后一个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>

Answer 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>

Answer 2

以下是您的选择：

使用javascript查找要隐藏的节点，然后将一个类应用于具有display：none的节点。 this is how you find the text
使用php向所有“待处理”行中添加一个类，然后使用CSS隐藏该类。
如果您刚开始编写前端代码，则可以使用框架来简化此类操作。尝试使用React或Angular。

数据表根据列值隐藏行

2 个答案: