Добрый день. HTML: [FONT=Arial][COLOR=rgb(20, 20, 20)]<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>My Customers</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <table id="myTable"> <tr> <th>name</th> <th>age</th> </tr> <tr> <td>Andrew</td> <td class="sum">20</td> </tr> <tr> <td>Andrew</td> <td class="sum">24</td> </tr> <tr> <td>Igor</td> <td class="sum">26</td> </tr> <tr> <td>Andrew</td> <td class="sum">31</td> </tr> </table> СУММА = <span id="total"></span> <script> var sum = 0; $('.sum').each(function () { sum += Number($(this).text()); }); $('#total').text(sum.toFixed(0)); function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> </body> </html>[/COLOR][/FONT] Как сделать так, чтобы сумма по второму столбцу пересчитывалась в зависимости от фильтра? Сейчас если я набираю в input Andrew, он фильтрует по имени, но сумма остается прежней.
Пример в песочнице. Внимательно смотрим на изменения в HTML Спойлер: HTML+JS HTML: <h2>My Customers</h2> <input type="text" id="myInput" placeholder="Search for names.."> <table id="myTable"> <thead> <tr> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>Andrew</td> <td class="sum">20</td> </tr> <tr> <td>Andrew</td> <td class="sum">24</td> </tr> <tr> <td>Igor</td> <td class="sum">26</td> </tr> <tr> <td>Andrew</td> <td class="sum">31</td> </tr> </tbody> </table> СУММА = <span id="total"></span> Код (Javascript): const rows = $('#myTable tbody tr'), total = $('#total'); $('#myInput').on('keyup', function() { let sum = 0, re = new RegExp('(' + $.trim($(this).val()) + ')', 'i'); rows.each(function(i, tr) { if (re.test($('td:eq(0)', tr).text())) { $(tr).show(); sum += +$('td:eq(1)', tr).text(); } else { $(tr).hide(); } }); total.text(sum.toFixed(0)); }).keyup();
Спасибо, а можно ли как-то сделать, используя мой код и условия видимости типа такого? var sum = 0; $('.sum').each(function () { if ($element.is(':visible')) { sum += Number($(this).text()); } });