Как скрыть\показать строку в таблице по клику и условию?

Question

[krinbin]

Есть калькулятор услуг в виде обычной таблицы

<tr>
    <td class="pnm" name="pnm">Услуга</td>
    <td class="qty"> <input type="number" class="qty" placeholder="0" value="" name="qty" /></td>   - тут кол-во
    <td class="unit">шт.</td>
    <td><input type="text" class="price" value="666" name="price" /></td>
    <td><input type="number" class="subtot" value="0" name="subtot" /> - тут сумма, считается по формуле qty * price
    </td>
</tr>

Нужно чтоб по клику, скрывались строки. (по второму клику показывались)
Условия могут быть такие
кол-во = 0
сумма = 0

Можно использовать любое условие.

Суть в том, что б убрать все поля которые пользователю не нужны и перед глазами была только актуальная информация.

Перепробовал кучу вариантов в итоге или удаляет все без разбора.
Или проверяет только 1й строку в таблице.

Comments

[shmatuan]

Можно больше кода? https://codepen.io/

По идее просто $("tr")[i].style.display = "none";

[xtress]

shmatuan, тогда уже просто $("tr").toggle(). Но соглашусь, - нужно больше кода, krinbin, - ибо ничерта непонятно.

[krinbin]

xtress, shmatuan,
https://codepen.io/anon/pen/MzmZLz

Как-то так.

[xtress]

krinbin, Даже так не слишком понятно. Попробую уточнить:
Вам нужно, чтобы по кнопке скрыть скрывались те строки где для услуги поле итого = 0? При повторном клике опять появлялись?

[krinbin]

xtress, в идеале так.
Человек заполняет калькулятор - устанавливает кол-во услуг. Выбрал он 3 шт из 10. Нажимает скрыть лишнее, у него остается таблица с расчетом по 3 услугам, потом он опомнился нажал показать, выбрал еще пару услуг и успокоился.

Второй вариант, хотя бы просто скрыть :) если уж первый вариант слишком сложный.

условие может быть или сумма = 0 или услуга (кол-во) = 0 тут не принципиально.

[shmatuan]

krinbin,
С минимальными изменениями

$('tbody tr').map(function(i, el){ 
     var name= $(el).find('.subtot').val();
     if (name=="" || name=="0") { 
       
          $(el).css('display','none');
     
     }
}); 
    });

[shmatuan]

krinbin,
1. $('tbody') - возвращает просто все найденные tbody (тут 1), поэтому делать на него map нет смысла - нужно на $('tbody tr') что бы получить список всех tr и по ним уже проходится
2. var name=$('.subtot') вернёт всегда просто первый найденный - нужно уточнять в какой строке именно искать var name= $(el).find('.subtot')
3. $("tbody tr").css('display','none'); просто берёт все tr и ставит им css без разбора и условий - нужно уточнить к какому именно мы применяем свойства $(el).css('display','none');
p.s. el из $('tbody tr').map(function(i, el){

[krinbin]

shmatuan, скорее всего TBODY будет несколько, точнее будет несколько таблиц по итогу

[shmatuan]

krinbin, ок, тогда этот код ещё обернуть в $('tbody').map((i, tbodyVar) => { ... }) и использовать как $(tbodyVar).find('tr')

Answer 1

[xtress]

Из того, что вы объяснили:
https://codepen.io/anon/pen/mQmvWq
UPD:
немного неверно работает, сейчас подправлю
UPD2:
Поправил, по той же ссылке4

Comments

[krinbin]

Ну огромнейшее спасибо!!!

[xtress]

krinbin, Не за что :) Через пару минут накидаю по той же ссылке вариант для двух таблиц