Alvin Bakker 很接近,但它需要更多的调整。
问题是您遍历每一行,包括标题行。标题行不包含您想要的值,因此它会遇到错误,并且 javascript 会停止执行错误。
解决此问题的一种简单方法是检查您是否在标题行中:
$('table .ilosc, table .cena_netto .stawka_vat').on('keyup paste change', function() {
$('table tr').each(function() {
//NEW CODE HERE:
//Pseudo code: if this row contains <th>-elements,
//then don't bother with it and move on to the next row.
if ($(this).find('th').length > 0)
return;
var ilosc = $(this).find('input.ilosc').val();
var cena_netto = $(this).find('input.cena_netto').val();
var wartosc_netto = (ilosc * cena_netto);
$(this).find('input.wartosc_netto').val(wartosc_netto);
var stawka_vat = $(this).find('input.stawka_vat').val().replace('%', '');
var kwota_vat = ( wartosc_netto * (stawka_vat / 100) );
$(this).find('input.kwota_vat').val(kwota_vat);
var wartosc_brutto = (wartosc_netto + kwota_vat);
$(this).find('input.wartosc_brutto').val(wartosc_brutto);
}); //END .each
return false;
}); // END change
替代解决方案(受@SlashmanX 评论的启发)
您还可以稍微调整您的 html:
将您的第一行放在一个<thead>
元素中。像这样:
<table>
<thead>
<tr>
<th>Lp.</th>
<th>Nazwa towaru lub usługi</th>
<th>Jednostka</th>
<th>Ilość</th>
<th>Cena netto</th>
<th>Wartość netto</th>
<th>Stawka VAT</th>
<th>Kwota VAT</th>
<th>Wartość brutto</th>
</tr>
</thead>
<!-- All data rows below -->
</table>
然后你可以像这样调整你的javascript:
$('table .ilosc, table .cena_netto .stawka_vat').on('keyup paste change', function() {
//Subtle difference in this line: Spot the '>' in the selector!
$('table>tr').each(function() {
var ilosc = $(this).find('input.ilosc').val();
var cena_netto = $(this).find('input.cena_netto').val();
var wartosc_netto = (ilosc * cena_netto);
$(this).find('input.wartosc_netto').val(wartosc_netto);
var stawka_vat = $(this).find('input.stawka_vat').val().replace('%', '');
var kwota_vat = ( wartosc_netto * (stawka_vat / 100) );
$(this).find('input.kwota_vat').val(kwota_vat);
var wartosc_brutto = (wartosc_netto + kwota_vat);
$(this).find('input.wartosc_brutto').val(wartosc_brutto);
}); //END .each
return false;
}); // END change
再次:感谢 SlashmanX 指出这一点。