jQuery如何在用户过滤表时同步计算总数 [英] Jquery how to synchronizely compute total when user filtered the table

问题描述

我有一个可以过滤内容并根据结果自动计算总数的表.我正在隐藏不符合搜索条件的行.

I have a table that can filter content and automatically compute the total based on the result. I'm hiding the rows that didn;t meet the search criteria.

我的问题是同步总数时会有延迟 请注意，在我的代码段中，但是当我添加另一个按键时，它会正确地同步总数.

my problem is there's a delay when synchronizing the total Notice in my code snippet, however when i add another key stroke it synchronize the total correctly.

我想要实现的是每当用户开始过滤时，就同步计算基本"支付行上的所有内容.

what i want to achieve is to calculate everyting on Basic pay row synchorizely whenever user start filtering.

预先感谢您:)

function myFunction() { // my function in table filter
  // Declare variables 
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

$(function() { // my function in summarizing basic pay
  $('#myInput').on('keydown', function() {

    var regAreaIs = 0;
    $('#myTable tbody tr:visible').each(function(index) {
      if ($('.reference_col').css('display') != 'none') {
        console.log("Row: " + index + " >Display is visible");
        $(this).find("#bpay").each(function() {
          var reg = $(this).text();
          regAreaIs += parseFloat(reg);
        }); // end loop
      } else {
        console.log("Row: " + index + " >Display is none");
        $(this).find("#bpay").each(function() {
          var reg = $(this).text();
          regAreaIs += parseFloat(reg);

        }); // end loop
      }
    });

    $('#totalResult').text(regAreaIs); // displaying the total 
  });
});

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  text-align: center;
}

th {
  background: #ddd;
}

tr,
td {
  border: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">



<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width:30%;">Name</th>
      <th style="width:40%;">Country</th>
      <th style="width:20%;">Basic Pay</th>
    </tr>
  </thead>
  <tbody>
    <tr class="reference_col">
      <td>Anne</td>
      <td>Japan</td>
      <td id="bpay">512</td>
    </tr>

    <tr class="reference_col">
      <td>Mark</td>
      <td>Philippines</td>
      <td id="bpay">560</td>
    </tr>

    <tr class="reference_col">
      <td>Alvin</td>
      <td>Korea</td>
      <td id="bpay">600</td>
    </tr>

    <tr class="reference_col">
      <td>Jasmine</td>
      <td>Japan</td>
      <td id="bpay">700</td>
    </tr>
  </tbody>
  <tfoot>
    <th>Total:</th>
    <th></th>
    <th id="totalResult">0</th>
  </tfoot>

</table>

推荐答案

使用keyup代替keydown.在keydown上，输入字段的值尚未更新.

Use keyup instead of keydown. On keydown, the value of the input field has not yet been updated.

function myFunction() { // my function in table filter
  // Declare variables 
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

$(function() { // my function in summarizing basic pay
  $('#myInput').on('keyup', function() {
    var regAreaIs = 0;
    $('#myTable tbody tr:visible').each(function(index) {
      if ($('.reference_col').css('display') != 'none') {
        console.log("Row: " + index + " >Display is visible");
        $(this).find("#bpay").each(function() {
          var reg = $(this).text();
          regAreaIs += parseFloat(reg);
        }); // end loop
      } else {
        console.log("Row: " + index + " >Display is none");
        $(this).find("#bpay").each(function() {
          var reg = $(this).text();
          regAreaIs += parseFloat(reg);

        }); // end loop
      }
    });

    $('#totalResult').text(regAreaIs); // displaying the total 
  });
});

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  text-align: center;
}

th {
  background: #ddd;
}

tr,
td {
  border: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">



<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width:30%;">Name</th>
      <th style="width:40%;">Country</th>
      <th style="width:20%;">Basic Pay</th>
    </tr>
  </thead>
  <tbody>
    <tr class="reference_col">
      <td>Anne</td>
      <td>Japan</td>
      <td id="bpay">512</td>
    </tr>

    <tr class="reference_col">
      <td>Mark</td>
      <td>Philippines</td>
      <td id="bpay">560</td>
    </tr>

    <tr class="reference_col">
      <td>Alvin</td>
      <td>Korea</td>
      <td id="bpay">600</td>
    </tr>

    <tr class="reference_col">
      <td>Jasmine</td>
      <td>Japan</td>
      <td id="bpay">700</td>
    </tr>
  </tbody>
  <tfoot>
    <th>Total:</th>
    <th></th>
    <th id="totalResult">0</th>
  </tfoot>

</table>

这篇关于jQuery如何在用户过滤表时同步计算总数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！