如何获取此代码以仅计算金额列

时间:2018-10-26 04:23:48

标签: javascript jquery html

大家好,我已经在Google上试了好几​​天了,无法弄清楚如何使此代码仅计算出addrow和deleterow函数起作用的数量列,只是可以弄清楚由谁来获得此toi calculatre总量如果尝试使用不同的代码但没有成功,请在金额列上提供帮助

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

  $(document).ready(function() {
  $(document).on('click', '#ncItems.add', function() {
    var row = $(this).parents('tr');
    var clone = row.clone();

    // clear the values
    var tr = clone.closest('tr');
    tr.find('input[type=text]').val('');

    $(this).closest('tr').after(clone);
    var total = 0;
    $(".last").each(function() {
      if (!$(this).val() == '') {
        total = total + parseFloat($(this).val());
      }
    })
    $("#nctotalPrice").html("$" + total +".00");
  });
  $(document).on("blur", ".last", function() {
    var total = 0;
    $(".last").each(function() {
      if (!$(this).val() == '') {
        total = total + parseFloat($(this).val());
      }
    })
    $("#nctotalPrice").html("$" +total+".00");
	document.getElementById("ntotal").value ="$" +total+".00";
  });
  $(document).on('focus', ".last", function() {
    var $qty = $(this).parents("tr").find("input[name^='quantity']");
    var $pr = $(this).parents("tr").find("input[name^='price']");
    var $amnt = $(this).parents("tr").find("input[name^='amount']");
    var a = 0;
    if ($qty.val() == '' || $pr.val() == '') {
      console.log("No values found.");
      return false;
    } else {
      console.log("Converting: ", $qty.val(), $pr.val());
      var q = parseInt($qty.val());
      var p = parseFloat($pr.val());
      console.log("Values found: ", q, p);
    }
    a = q * p;
    $amnt.val(Math.round(a * 100) / 100);
	
  });
  $(document).on('click', 'ncItems .removeRow', function() {
    if ($('#ncItems .add').length > 1) {
      $(this).closest('tr').remove();
    }
  });
});

    </script>
<div id="dvncc"> 
  <form id="ncc">
  <table id="ncItems" name="ncItems" align="center">
  <tr>

	<th>Type</th>
    <th>Discription</th>
    <th>Amount</th>
	<th>Actions</th>
  </tr>
  <tr>
  <td>
      <select name="type[]" class="next" required>
      <option value=" selected="selected"">Please Select..</option>
      <option value="Code">Code</option>
      <option value="Regular">Regular</option>
    </select>
    </td>
      <input type="text" name="discription[]" class="next" required  />
    </td>
   
    <td>
      <input type="text" name="amount[]" class="next last" required readonly/>
    </td>
    <td>
      <input type="button" name="addRow[]" class="add" value='+' />
	  <input type="button" name="addRow[]" class="removeRow" value='-' />
    </td>
  </tr>
  <tr>
    <th>Total :</th>
    <td  id="nctotalPrice"></td>
  </tr>
</table>
		</form>
    </div> 

1 个答案:

答案 0 :(得分:0)

请尝试以下操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Final</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $(document).on('click', '.add', function() {
                var row = $(this).parents('tr');
                var clone = row.clone();

                // clear the values
                var tr = clone.closest('tr');
                tr.find('input[type=text]').val('');

                $(this).closest('tr').after(clone);
                var total = 0;
                $(".last").each(function() {
                    if (!$(this).val() == '') {
                        total = total + parseFloat($(this).val());
                    }
                })
                $("#nctotalPrice").html("$" + total +".00");
            });
            $(document).on("blur", ".last", function() {
                var total = 0;
                $(".last").each(function() {
                    if (!$(this).val() == '') {
                        total = total + parseFloat($(this).val());
                    }
                })
                $("#nctotalPrice").html("$" +total+".00");
                document.getElementById("ntotal").value ="$" +total+".00";
            });
            $(document).on('focus', ".last", function() {
                var $qty = $(this).parents("tr").find("input[name^='quantity']");
                var $pr = $(this).parents("tr").find("input[name^='price']");
                var $amnt = $(this).parents("tr").find("input[name^='amount']");
                var a = 0;
                if ($qty.val() == '' || $pr.val() == '') {
                    console.log("No values found.");
                    return false;
                } else {
                    console.log("Converting: ", $qty.val(), $pr.val());
                    var q = parseInt($qty.val());
                    var p = parseFloat($pr.val());
                    console.log("Values found: ", q, p);
                }
                a = q * p;
                $amnt.val(Math.round(a * 100) / 100);

            });
            $(document).on('click', '.removeRow', function() {
                if ($('#ncItems .add').length > 1) {
                    $(this).closest('tr').remove();
                }
            });
        });
    </script>
</head>
<body>
<div id="dvncc">
    <form id="ncc">
        <table id="ncItems" name="ncItems" align="center">
            <tr>

                <th>Type</th>
                <th>Discription</th>
                <th>Amount</th>
                <th>Actions</th>
            </tr>
            <tr>
                <td>
                    <select name="type" class="next" required>
                        <option value="" selected="selected">Please Select..</option>
                        <option value="Code">Code</option>
                        <option value="Regular">Regular</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="discription" class="next" required  />
                </td>

                <td>
                    <input type="text" name="amount" class="next last" required/>
                </td>
                <td>
                    <input type="button" name="addRow" class="add" value='+' />
                    <input type="button" name="remove" class="removeRow" value='-' />
                </td>
            </tr>
            <tr>
                <th>Total :</th>
                <td  id="nctotalPrice"></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>