jQuery 计数百分比 - 显示 "undefined"

Question

我的脚本应该计算 table 中的值，但它不能替换“%”字符并显示 'undefined'。我尝试了一些解决方案，但没有成功。

我做了一个fiddle：fiddle

    $('table .ilosc, table .cena_netto .stawka_vat').on('keyup paste change', function() {
        $('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

它工作正常直到行：$(this).find('input.wartosc_netto').val(wartosc_netto);

Answer 1

我想我找到了...您对所有 <tr> 行执行 each。第一行是 header。所以它不会找到任何值。用 <thead> 替换该行，然后 undefined 错误就不会发生。当发生这样的错误时，脚本的其余部分将停止。

更好的方法是给 <tr> 一个 class 然后循环遍历 classes.

请注意，如果在执行替换之前未找到任何值，请后退

Answer 2

Alvin Bakker 很接近，但还需要更多调整。

问题是您运行遍历每一行，包括 header 行。 header 行不包含您想要的值，因此它运行出错，并且 javascript 停止执行错误。

解决这个问题的一个简单方法是检查您是否在 header 行中：

  $('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 指出这一点。

jQuery 计数百分比 - 显示 "undefined"

jQuery counting percentage - shows "undefined"

html

jquery

input

percentage

jquery-calculation