时间戳

首页 > 解决方案 > 计算过滤列的总和

javascript - 计算过滤列的总和

问题描述

我正在尝试过滤一个 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”并更新总数？

标签： javascript

解决方案

一个简单的方法是将 id 放在 上tbody，然后在隐藏所有值之后再次计算总和，具体取决于tds 的父级是否隐藏。

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>

小提琴：https ://jsfiddle.net/63gdq8pr/1/

推荐阅读