计算过滤列的总和

Question

我正在尝试过滤html表并计算已过滤列的总和。 到目前为止，筛选工作正常，但我无法更新总数。

function searchTable() {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("displaytable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
      }
    }
    if (found) {
      tr[i].style.display = "";
      found = false;
    } else {
      tr[i].style.display = "none";
    }
  }

}
var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
  if (cls[i].className == "countable") {
    sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  }
}
document.getElementById('total').innerHTML += sum;

<input type="text" id="search" onkeyup='searchTable()' placeholder="Type to search">
<table id="displaytable">
  <thead>
    <tr>
      <th>User</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td class="countable">5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td class="countable">4</td>
    </tr>
    <tr>
      <td>Jordan</td>
      <td class="countable">7</td>
    </tr>
    <tr>
      <td>David</td>
      <td class="countable">3</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td class="countable">1</td>
    </tr>
  </tbody>
  <tfoot class="shown">
    <tr>
      <td colspan="4">Total:</td>
      <td id="total"></td>
    </tr>
  </tfoot>
</table>

当我使用过滤器时，总和不会刷新（'tfoot'消失）。 要始终显示'tfoot'并更新总数，我该怎么做？

Answer 1

An easy way to do this is to put the id on the tbody, and the calculate the sum again after all values have been hidden depending if the parent of the tds are hidden or not.

function searchTable() {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("displaytable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
      }
    }
    if (found) {
      tr[i].style.display = "";
      found = false;
    } else {
      tr[i].style.display = "none";
    }
  }
  var cls = document.getElementById("displaytable").getElementsByTagName("td");
  var sum = 0;
  for (var i = 0; i < cls.length; i++) {
    // Here you check if it's a countable class and the parent tr's style is a visible tr
    if (cls[i].className == "countable" && cls[i].closest("tr").style.display != "none") {
      sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
    }
  }
  document.getElementById('total').innerHTML = sum;

}
var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
  if (cls[i].className == "countable") {
    sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  }
}
document.getElementById('total').innerHTML += sum;

<input type="text" id="search" onkeyup='searchTable()' placeholder="Type to search">
<table>
  <thead>
    <tr>
      <th>User</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody id="displaytable">
    <tr>
      <td>John</td>
      <td class="countable">5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td class="countable">4</td>
    </tr>
    <tr>
      <td>Jordan</td>
      <td class="countable">7</td>
    </tr>
    <tr>
      <td>David</td>
      <td class="countable">3</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td class="countable">1</td>
    </tr>
  </tbody>
  <tfoot class="shown">
    <tr>
      <td colspan="4">Total:</td>
      <td id="total"></td>
    </tr>
  </tfoot>
</table>

Fiddle : https://jsfiddle.net/63gdq8pr/1/