javascript - jQuery 计算乘法表单输入字段

Question

我对事件变化时计算乘法表单字段有疑问。新表单字段的计算 form modila 工作正常。如果单击 img-X，我在每个表单字段事件中都必须删除表单字段，并且在删除该字段后必须再次计算所有字段以获得新结果。问题出在我的<tr></tr>标签插入表格，我有类 pdv 的文本，并且该字段必须用两个值的总和 kolicina * cijena 计算，我的意思是三个字段的计算给出输出结果.更好的解释我将在下面提供代码，并将详细解释。

html

<tbody>
    <tr class="opa">
        <td>234</td>
        <td>Penkala za ured</td>
        <td>
            <input type="text" class="form-control" placeholder=" Napomena"/>
        </td>
        <td>Komad</td>
        <td>
            <input type="text" class="form-control kolicina" placeholder=" Količina" />
        </td>
        <td>
            <input type="text" class="form-control cijena" placeholder=" Cjena"/>
        </td>
        <td>
            <input type="text" class="form-control popust" placeholder=" Popust"/>
        </td>
        <td class="pdv">13%</td>
        <td>10.00</td>
        <td>
            <img class="img-responsive remove_element" src="../images/forms/icon_delete.png"/>
        </td>
    </tr>
    <tr class="opa">
        <td>1</td>
        <td>Čokolada</td>
        <td>
            <input type="text" class="form-control" placeholder=" Napomena"/>
        </td>
        <td>Komad</td>
        <td>
            <input type="text" class="form-control kolicina" placeholder=" Količina"/>
        </td>
        <td>
            <input type="text" class="form-control cijena" placeholder=" Cjena"/>
        </td>
        <td>
            <input type="text" class="form-control popust" placeholder=" Popust"/>
        </td>
        <td class="pdv">25%</td>
        <td>5.30</td>
        <td>
            <img class="img-responsive remove_element" src="../images/forms/icon_delete.png"/>
        </td>
    </tr>
    <tr class="opa">
        <td>52</td>
        <td>Pranje auta</td>
        <td>
            <input type="text" class="form-control" placeholder=" Napomena"/>
        </td>
        <td>Komad</td>
        <td>
            <input type="text" class="form-control kolicina" placeholder=" Količina"/>
        </td>
        <td>
            <input type="text" class="form-control cijena" placeholder=" Cjena"/>
        </td>
        <td>
            <input type="text" class="form-control popust" placeholder=" Popust"/>
        </td>
        <td class="pdv">25%</td>
        <td>6.40</td>
        <td>
            <img class="img-responsive remove_element" src="../forms/icon_delete.png"/>
        </td>
    </tr>
</tbody>

这是我的结果表，你可以看到类 kolicina - cijena - popust - pdv ，这就是所有用于计算表单字段的内容。问题是如何从 pdv 类中获取当前文本并使用 kolicina - cijena - popust 进行计算，然后在计算后附加到 html 中的某个元素。

在 jQuery 中，我完成了字段 kolicina - cijena - popust 的计算，并将它们附加到 HTML elemnet。问题是当 pdv 文本值为 25 或 13 或 5 时，计算必须进入单独的 html 元素。

html

<span><a class="sum">0 </a></span>
<span><a class="popust_count">0 </a></span>
<span><a class="popust_all">0 </a></span>
<span><a class="sum">0 </a></span>
<span>PDV 25%: <a class ="pdv_25">0 </a> | PDV 13%: <a class="pdv_13">0 </a> | PDV 5%: <a class="pdv_5">0 </a></span>

我的 jQuery 代码如下所示:此代码有效。

$(".prod_go input").keyup(multInputs);

                    $(".remove_element").click(function() {
                        $(this).parent().parent().remove();
                        multInputs();
                    });

                       function multInputs() {
                           var mult = 0;
                           var sa_popust_uk = 0;

                           var pdv_25 = 0;
                           var pdv_13 = 0;
                           var pdv_5 = 0;
                           // for each row:
                           $("tr.opa").each(function () {
                               // get the values from this row:

                               var $kolicina = $('.kolicina', this).val();
                               var $cijena =   $('.cijena', this).val();
                               var $popust =   $('.popust', this).val();

                               var $total = ($kolicina * 1) * ($cijena * 1);
                               var $total_popus = ($kolicina * 1) * ($cijena * 1) * (($popust * 1)/100);

                                /*Porez*/



                               var value1 =Number($(this).closest('tr.opa').find('td[class=pdv]').text().replace(/[%]/g, ""));

                               if (value1 === 25){

                                    var kaos = ($kolicina * 1) * ($cijena * 1) * (0.25 * 1);
                                    pdv_25 +=kaos;
                               }
                               if (value1 === 13){

                                    var kaos = ($kolicina * 1) * ($cijena * 1) * (0.13 * 1);
                                    pdv_13 +=kaos;
                               }
                               if (value1 === 5){

                                    var kaos = ($kolicina * 1) * ($cijena * 1) * (0.05 * 1);
                                    pdv_5 +=kaos;
                               }


                               // set total for the row
                               //$('.sum').text($total);
                               mult += $total;
                               sa_popust_uk += $total_popus;

                           });
                            $(".popust_all").text(mult-sa_popust_uk.toFixed(2)+' kn');
                            $('.sum').text(mult.toFixed(2)+' kn');
                            $('.popust_count').text(sa_popust_uk.toFixed(2)+' kn');

                           /*Append PDV to page*/
                            $('.pdv_25').text(pdv_25.toFixed(2)+' kn');
                            $('.pdv_13').text(pdv_13.toFixed(2)+' kn');
                            $('.pdv_5').text(pdv_5.toFixed(2)+' kn');

                           $('.sum_od_all').text((mult+pdv_25+pdv_13+pdv_5).toFixed(2)+' kn');

                           console.log('PDV 25:'+ pdv_25+' PDV 13:'+ pdv_13+' PDV 5:'+ pdv_5);

                           //$(".sum_od_all").text(mult);
                       }


            });

如果你能看一下并给我一些关于这个表格计算的建议。

Answer 1

我还没有完全理解(首先你需要在跨度值中放入什么)，所以这就是我得到的:JSFIDDLE DEMO

$(".prod_go").on('input','input',multInputs);

function multInputs() {
    var mult = 0;
    var sa_popust_uk = 0;

    $("tr.opa").each(function () {
        var $kolicina = $('.kolicina', this).val(),
            $cijena = $('.cijena', this).val(),
            $popust = $('.popust', this).val(),
            $total = ($kolicina * 1) * ($cijena * 1),
            $total_popus = ($kolicina * 1) * ($cijena * 1) * (($popust * 1) / 100);

        //Forge the class name of the span: <td class="pdv">25%</td> becomes pdv_25
        var $pdv_span = 'pdv_'+($('.pdv', this).text().replace('%','')).trim();
        console.log($pdv_span);

        mult += $total;
        sa_popust_uk += $total_popus;
        //Append value to the relative span value
        $('.'+$pdv_span).text(mult);
    });
    $(".popust_all").text(mult - sa_popust_uk.toFixed(2) + ' kn');
    $('.sum').text(mult.toFixed(2) + ' kn');
    $('.popust_count').text(sa_popust_uk.toFixed(2) + ' kn');

}

其中 prod_go 是表类，我也将 $(".prod_go input").keyup(multInputs); 更改为 $(". prod_go").on('input','input',multInputs); 因为它作为事件更可靠。

如果需要区分multi，那么:JSFIDDLE

    $(".prod_go").on('input', 'input', multInputs);

function multInputs() {
    var mult = 0,
        mult5 = 0,
        mult13 = 0,
        mult25 = 0,
        sa_popust_uk = 0;

    $("tr.opa").each(function () {
        var $kolicina = $('.kolicina', this).val(),
            $cijena = $('.cijena', this).val(),
            $popust = $('.popust', this).val(),
            $total = ($kolicina * 1) * ($cijena * 1),
            $total_popus = ($kolicina * 1) * ($cijena * 1) * (($popust * 1) / 100);

        //Forge the class name of the span: <td class="pdv">25%</td> becomes pdv_25
        var $pdv_span = ($('.pdv', this).text().replace('%', '')).trim();
        console.log($pdv_span);
        switch ($pdv_span) {
            case '5':
                mult5 += $total;
                $('.pdv_' + $pdv_span).text(mult5);
                break;
            case '13':
                mult13 += $total;
                $('.pdv_' + $pdv_span).text(mult13);
                break;
            case '25':
                mult25 += $total;
                $('.pdv_' + $pdv_span).text(mult25);
                break;
            default:
                break;
        }
        sa_popust_uk += $total_popus;
    });
    mult = mult5 + mult13 + mult25;
    $(".popust_all").text(mult - sa_popust_uk.toFixed(2) + ' kn');
    $('.sum').text(mult.toFixed(2) + ' kn');
    $('.popust_count').text(sa_popust_uk.toFixed(2) + ' kn');

}