Как суммировать значение td таблицы с помощью опции поиска

#javascript #html

#javascript #HTML

Вопрос:

Мне нужно вычислить общее значение строки прямо сейчас, согласно коду, он вычисляет общую строку, и иногда в результате отображается 1 дополнительная строка, которую вы можете попытаться найти (a), вы увидите.

 $(document).ready(function(){
    $("#filter").keyup(function(){
        var filter = $(this).val(), count = 0;
  
        $("tbody tr").each(function(){
 
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
           
            } else {
                $(this).show();
                count  ;
            }
        });
        
        var numberItems = count;
        $("#filter-count").text("NUMBER OF ROW FOUND = " count);
    });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Search" />
</fieldset>
</form>
<div id="filter-count"></div>
<table>
    <th>Name</th>
    <th>Amount</th>
    <tr><td>a</td><td>250</td></tr>
    <tr><td>a</td><td>250</td></tr>
    <tr><td>b</td><td>250</td></tr>
    <tr><td>b</td><td>250</td></tr>
    <tr><td>c</td><td>250</td></tr>
    <tr><td>c</td><td>250</td></tr>
</table>

Ответ №1:

Проблема заключается в имени и сумме в th — в них есть a , поэтому эта строка включена в счетчик

Вы должны были заметить в своем коде, что при поиске b или c строка заголовка также исчезает!!

Попробуйте поместить заголовок в thead (кстати, в tr в thead)

и тело в tbody

 $(document).ready(function(){
    $("#filter").keyup(function(){
        var filter = $(this).val(), count = 0;
        var total = 0;
        $("tbody tr").each(function(){
 
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
           
            } else {
                $(this).show();
                total  = Number($(this).find('td:last-child').text());
                count  ;
            }
        });
        
        var numberItems = count;
        $("#filter-count").text("NUMBER OF ROW FOUND = "  count   ' Total value= '   total);
    });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Search" />
</fieldset>
</form>
<div id="filter-count"></div>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>a</td><td>250</td></tr>
        <tr><td>a</td><td>250</td></tr>
        <tr><td>b</td><td>250</td></tr>
        <tr><td>b</td><td>250</td></tr>
        <tr><td>c</td><td>250</td></tr>
        <tr><td>c</td><td>250</td></tr>
   </tbody>
</table>

1. дополнительная проблема 1 решена, спасибо, но мне нужно суммировать сумму в соответствии с результатом поиска

2. что ж, вы даже не пытались использовать это в своем коде — давайте посмотрим, смогу ли я написать это для вас

3. Готово — теперь я добавил суммирование суммы для вас

4. Потрясающее спасибо за быстрый ответ