jQuery的計算乘表單輸入字段

Question

我對事件的變化計算乘法表單域的問題。 對於新表單域的表單修改可以正常工作。如果單擊了img-X，我必須在每個表單域上單擊表單域，必須刪除表單域，並且刪除該域後，必須重新計算所有域的新結果。 問題是在我的<tr></tr>標籤insade表，我有類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);。

如果您需要多加以區分，那麼：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'); 

}