За последние 24 часа нас посетили 20337 программистов и 1082 робота. Сейчас ищут 744 программиста ...

JS: динамический пересчет суммы в зависимости от фильтра

Тема в разделе "JavaScript и AJAX", создана пользователем Horus1613, 21 май 2018.

  1. Horus1613

    Horus1613 Новичок

    С нами с:
    25 май 2017
    Сообщения:
    34
    Симпатии:
    0
    Добрый день.


    HTML:
    1.  
    2. [FONT=Arial][COLOR=rgb(20, 20, 20)]<!DOCTYPE html>
    3. <meta name="viewport" content="width=device-width, initial-scale=1">
    4. </head>
    5.  
    6. <h2>My Customers</h2>
    7. <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
    8.  
    9. <table  id="myTable">
    10.    <tr>
    11. <th>name</th>
    12. <th>age</th>
    13.   </tr>
    14.   <tr>
    15.     <td>Andrew</td>
    16.     <td class="sum">20</td>
    17.   </tr>
    18.   <tr>
    19.     <td>Andrew</td>
    20.     <td class="sum">24</td>
    21.   </tr>
    22.   <tr>
    23.     <td>Igor</td>
    24.     <td class="sum">26</td>
    25.   </tr>
    26.   <tr>
    27.     <td>Andrew</td>
    28.     <td class="sum">31</td>
    29.   </tr>
    30.  
    31. СУММА = <span id="total"></span>
    32.  
    33.  
    34.  
    35.  
    36.  
    37. var sum = 0;
    38. $('.sum').each(function () {
    39.     sum += Number($(this).text());
    40. });
    41.  
    42. $('#total').text(sum.toFixed(0));
    43.  
    44. function myFunction() {
    45.   var input, filter, table, tr, td, i;
    46.   input = document.getElementById("myInput");
    47.   filter = input.value.toUpperCase();
    48.   table = document.getElementById("myTable");
    49.   tr = table.getElementsByTagName("tr");
    50.   for (i = 0; i < tr.length; i++) {
    51.    td = tr[i].getElementsByTagName("td")[0];
    52.    if (td) {
    53.      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    54.         tr[i].style.display = "";
    55.       } else {
    56.         tr[i].style.display = "none";
    57.       }
    58.     }      
    59.   }
    60. }
    61.  
    62. </body>
    63. </html>[/COLOR][/FONT]
    64.  
    65.  

    Как сделать так, чтобы сумма по второму столбцу пересчитывалась в зависимости от фильтра?
    Сейчас если я набираю в input Andrew, он фильтрует по имени, но сумма остается прежней.
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Пример в песочнице. Внимательно смотрим на изменения в HTML
    HTML:
    1. <h2>My Customers</h2>
    2. <input type="text" id="myInput" placeholder="Search for names..">
    3.  
    4. <table id="myTable">
    5.   <thead>
    6.     <tr>
    7.       <th>name</th>
    8.       <th>age</th>
    9.     </tr>
    10.   </thead>
    11.   <tbody>
    12.     <tr>
    13.       <td>Andrew</td>
    14.       <td class="sum">20</td>
    15.     </tr>
    16.     <tr>
    17.       <td>Andrew</td>
    18.       <td class="sum">24</td>
    19.     </tr>
    20.     <tr>
    21.       <td>Igor</td>
    22.       <td class="sum">26</td>
    23.     </tr>
    24.     <tr>
    25.       <td>Andrew</td>
    26.       <td class="sum">31</td>
    27.     </tr>
    28.   </tbody>
    29. СУММА = <span id="total"></span>
    30.  
    Код (Javascript):
    1. const rows = $('#myTable tbody tr'),
    2.   total = $('#total');
    3. $('#myInput').on('keyup', function() {
    4.   let sum = 0,
    5.     re = new RegExp('(' + $.trim($(this).val()) + ')', 'i');
    6.   rows.each(function(i, tr) {
    7.     if (re.test($('td:eq(0)', tr).text())) {
    8.       $(tr).show();
    9.       sum += +$('td:eq(1)', tr).text();
    10.     } else {
    11.       $(tr).hide();
    12.     }
    13.   });
    14.   total.text(sum.toFixed(0));
    15. }).keyup();
     
  3. Horus1613

    Horus1613 Новичок

    С нами с:
    25 май 2017
    Сообщения:
    34
    Симпатии:
    0

    Спасибо, а можно ли как-то сделать, используя мой код и условия видимости типа такого?

    var sum = 0;
    $('.sum').each(function () {
    if ($element.is(':visible')) {
    sum += Number($(this).text());
    }
    });