Question

在下面的小提琴中，我编写了用于将文本框（数量，价格）和选择框（税率）值相乘的代码，并使用caluculate（javascript函数）的结果填充Total textbox值。

请查看小提琴http://jsfiddle.net/fvJgE/13/以获取代码。任何人都可以找到我缺少的或我在哪里做错了？

Jquery代码

var count = 1;
        $(document).ready(function () {

            $("#addButton").click(function () {

            if(count>7){
                alert("Only 7 textboxes allow");
                return false;
                }   

        var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + count);

        newTextBoxDiv.after().html(
          '<label>Desc #'+ count + ' : </label>' +
      '<input type="text" size="4" name="desc[]" id="desc' + count + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;\n\
          <label>Tax #'+ count + ' : </label>' +
      '<select id="tax_type' + count + '" ><option value="tax1">VAT</option><option value="tax2">ST</option></select>&nbsp;&nbsp;&nbsp;&nbsp;\n\
          <label>Tax% #'+ count + ' : </label>' +
          '<select id="tax_per' + count + '" ><option value="Vat">5.5</option><option value="ST">14.5</option></select>&nbsp;&nbsp;&nbsp;&nbsp;\n\
          <label>Qty #'+ count + ' : </label>' +
      '<input type="text" size="1" name="qty[]" id="qty' + count + '" value="" >&nbsp;&nbsp;&nbsp;\n\
          <label>price #'+ count + ' : </label>' +
      '<input type="text" size="2" name="price[]" id="price' + count + '" value="" >&nbsp;&nbsp;&nbsp;\n\
      <label>Total #'+ count + ' : </label>' +
          '<input type="text" size="3" name="total[]" id="total' + count + '" value="" >'
    );

          newTextBoxDiv.appendTo("#TextBoxesGroup");
            $('#qty' + count).on("blur", function() {
            calculate($(this));
           });
            $('#price' + count).on("blur", function() {
            calculate($(this)); 
            });
            $('#tax_per' + count).on("change", function() {
            calculate($(this)); 
            });

           count++;  

        });//closing the addButton function     

        //To caluculate Total amount based on price and tax percentage   
         function calculate(el) {
        var count = el.attr("id").indexOf("qty") != -1 ?               el.attr("id").substring(3) : el.attr("id").substring(5);
        var qty = isNaN(parseFloat($('#qty' + count).val())) ? 0 :      parseFloat($('#qty' + count).val());
        var price = isNaN(parseFloat($('#price' + count).val())) ? 0 :     parseFloat($('#price' + count).val());
        var tax_per = isNaN(parseFloat($('#tax_per' + count).val())) ? 0 :            parseFloat($('#tax_per' + count).val());
        var value = qty*price;
        //alert(value);
        var tax_amt = (value*tax_per)/100;
        //alert(tax_amt);
        var total_value = value + tax_amt;
        $("#total" + count).val(total_value);
        }


          //To remove the added textboxes
          $("#removeButton").click(function () {
                if(count==0){
                alert("No more textbox to remove");
                return false;
                }
                count--;

                $("#TextBoxDiv" + count).remove();
                });

         });

HTML代码

<table>
<tr>
 <td>
    <input type="button" id="addButton" value="Add" class="add" >
    <input type="button" id="removeButton" value="Delete" class="remove" >
 </td>
</tr>
</table>
 <table>
  <tr>
    <td>
       <div id='TextBoxesGroup'>

        </div>
     </td>
 </tr>
</table>

该值显示在“总计”文本框中，但不考虑计算中的选择框（Tax％）值。在此先感谢您的帮助。

Answer 1

它不起作用，因为tax_perc select元素中的值实际上是字符串“VAT”和“ST”。我想你的意思是将原始值放在那里（分别为5.5,14.5），以便在你打电话时

$('#tax_perc'+count).val()

你实际上读5.5（或14.5）进行乘法运算。

换句话说，改变这个：

'<select id="tax_per' + count + '" ><option value="Vat">5.5</option><option value="ST">14.5</option></select>&nbsp;&nbsp;&nbsp;&nbsp;\n\

有关：

'<select id="tax_per' + count + '" ><option value="5.5">5.5</option><option value="14.5">14.5</option></select>&nbsp;&nbsp;&nbsp;&nbsp;\n\

将动态生成的选择框和文本框值相乘，并将结果显示在jquery中的另一个文本框中

1 个答案: