Datatable скрыть строки на основе значения столбца

Question

У меня есть этот набор данных, который генерируется php один раз динамически.Но после загрузки я хочу скрыть всю строку со статусом Pending .Я добавил класс "cls_status" к последнему td каждого tr, поэтому я хочу скрыть тот tr, последний из которых имеет статус Pending.

В следующем примере после загрузки 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. вот как вы находите текст

• используйте php, чтобы добавить класс ко всем строкам "Pending", а затем используйте css, чтобы скрыть этот класс.

• Если вы только начали писать код внешнего интерфейса, то были созданы фреймворки для упрощения подобных вещей.Попробуйте React или Angular.