添加新行并从html表中计算单独的值 [英] Add new row and calculate seperate value from html table

问题描述

这是我的HTML表必须添加新行并更改行以销售各种产品.我的问题是，当我添加新行并输入平方英尺时，可以正确计算出输出件.如果我输入件，那么正确地输出平方英尺.如果我一个接一个地做，那没问题，但是如果我回到第一排并改变平方英尺或块数.所有的值都改变了.请任何人帮助我.

This is my HTML table have to add new row and change row to sale various product. my problem is that when i add new row and input square feet then calculation properly output pieces . If i input pieces then properly output square feet. If i do that one after one then no problem but if i go back at first row and change square feet or pieces. all value are changed. please help me any one .

$(document).ready(function() {
  $("#add").click(function() {
    var category = $("#grade_id").val();
    //alert(category)
    if (category == '') {
      alert('Please Select Grade');
    } else {
      addNewRow();
    }
  })

  function addNewRow() {
    /*	
    	var grade = $("#grade_id").val();
    	//alert(grade)
    	$.ajax({
    		url :"{{ route('sale.getBrands')}}",
    		method : "GET",
    		data : {grade:grade},
    		success : function(data){
    			//alert(data)
    			$("#invoice_item").append(data);
    			var n = 0;
    			$(".number").each(function(){
    				$(this).html(++n);
    			})
    		}
    	})*/
    $("#invoice_item").append('<tr><td><select class="form-control pid" name="" id="grade_id"><option value="">Select</option><option value="1">Product Code - 1001</option><option value="2">Product Code - 1002</option><option value="3">Product Code - 1003</option></select></td><td><input type="text" name="stock" class="form-control stock" value="250"></td><td><input type="text" name="square_feet" class="form-control square_feet" ></td><td><input type="text" name="prices" class="form-control pices"></td><td><input type="text" name="sale_price" class="form-control sale_price"></td><td>BDT:<span class="amt">0</span></td></tr>');
  }
  /* for remove row-*/
  $("#remove").click(function() {
    $("#invoice_item").children("tr:last").remove();
  })

  $("#invoice_item").delegate(".pid", "change", function() {
    var pid = $(this).val();
    var tr = $(this).parent().parent();
    //alert(pid)
    $(".overlay").show();

    $('.price').keyup(function() {
      tr.find(".amt").html(tr.find(".qty").val() * tr.find(".price").val());
    })

    $('.square_feet').keyup(function() {
      //alert('ok')
      var order_square_feet = $(this).val();
      var total_pices = order_square_feet / .667;
      tr.find('.pices').val(total_pices);
    })
    $('.pices').keyup(function() {
      var pices = $(this).val();
      var square_feet = pices * .667;
      tr.find('.square_feet').val(square_feet);
    })
  })
});

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<div style="max-width: 60%; margin: 0 auto">
  <table>
    <thead>
      <tr>
        <th>Product Information</th>
        <th>Stock</th>
        <th>Square Feet</th>
        <th>Pices</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody id="invoice_item" class='table'>
      <tr>
        <td>
          <select class="form-control pid" name="" id="grade_id">
            <option value="">Select</option>
            <option value="1">Product Code - 1001</option>
            <option value="2">Product Code - 1002</option>
            <option value="3">Product Code - 1003</option>
          </select>
        </td>
        <td><input type="text" name='stock' class='form-control stock' value='250'></td>
        <td><input type="text" name='square_feet' class='form-control square_feet'></td>
        <td><input type="text" name='prices' class='form-control pices'></td>
        <td><input type="text" name='sale_price' class='form-control sale_price'></td>
        <td>BDT:<span class='amt'>0</span></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <button id="add" type="button" style="width:150px;" class="btn btn-success">Add</button>
        </td>
        <td>
          <button id="remove" type="button" style="width:150px;" class="btn btn-danger">Remove</button>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

推荐答案

@Jones Joseph 我的真实代码是.如果我在功能中使用了您的代码，它将无法正常工作.我正在Laravel 5.6刀片文件中使用此代码.

@Jones Joseph my real code is. If i use your code into my function it is not working. I am using this code in Laravel 5.6 blade file.

$("#invoice_item").delegate(".pid","change",function()
		{
			var pid = $(this).val();
			var tr = $(this).parent().parent();
			$(".overlay").show();
			$.ajax({
				url :"{{ route('sale.getPriceAndQty')}}",
				method : "GET",
				dataType : "json",
				data : {getPriceAndQty:1,id:pid},
				data : {id:pid},
				success : function(data)
				{
					//alert(data["sale_price"])
					tr.find("#tqty").val(data["stock_square_feet"]);
					tr.find(".grade_name").val(data["grade_name"]);
					tr.find(".grade_id").val(data["grade_id"]);
					tr.find(".type_id").val(data["type_id"]);
					tr.find(".code_id").val(data["code_id"]);
					tr.find(".per_square_feet").val(data["per_square_feet"]);
					
					tr.find(".qty").val(1);
					tr.find(".price").val(data["per_price"]);
					tr.find(".amt").html( tr.find(".qty").val() * tr.find(".price").val() );
					//calculate(0,0,0);

					$('.qty').keyup(function(){
						$(".order_pices:last").attr("id","intro_"+data['id']);
						var order_square_feet = $(this).val();
						var total_pices = order_square_feet / data["per_square_feet"];
						tr.find('.order_pices').val(total_pices);
					})
					$('.order_pices').keyup(function(){
						var pices = $(this).val();
						var square_feet = pices * data["per_square_feet"];
						tr.find('.qty').val(square_feet);
					})
				}
			})
		})
				
				
				
	});

这篇关于添加新行并从html表中计算单独的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！