Question

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

$(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>

Answer 1

更正了您的代码。

我不明白您为什么将所有事件分配都放在下拉列表的import pandas as pd import openpyxl #reading the sheet1 using read_excel df = pd.read_excel('workbook.xlsx', sheet_name='Sheet1') #creating pandas ExcelWriter object and loading the excel file using `openpyxl` df_writer = pd.ExcelWriter('workbook.xlsx', engine='openpyxl') excel = openpyxl.load_workbook('workbook.xlsx') df_writer.book = excel #checking string in column 1 and writing those to respective sheets in same workbook for string in ['A','B']: df[df['column 1'].str.contains(string)].to_excel(df_writer,sheet_name=string) #saving and closing writer writer.save() writer.close()事件中。这将在同一文本框中分配多个keyup事件。
我为下拉菜单的change事件之外的所有文本框分别放置了change事件。

delegate

$(document).ready(function() {
  $("#add").click(function() {
    var category = $("#grade_id").val();
    //alert(category)
    if (category == '') {
      alert('Please Select Grade');
    } else {
      addNewRow();
    }
  })

  function addNewRow() {

    $("#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();
    //alert(pid)
    $(".overlay").show();
  });

  $("#invoice_item").delegate('.price', 'keyup', function() {
    $(this).closest('tr').find(".amt").html($(this).closest('tr').find(".qty").val() * $(this).closest('tr').find(".price").val());
  })

  $("#invoice_item").delegate('.square_feet', 'keyup', function() {
    //alert('ok')
    var order_square_feet = $(this).val();
    var total_pices = order_square_feet / .667;
    $(this).closest('tr').find('.pices').val(total_pices);
  })

  $("#invoice_item").delegate('.pices', 'keyup', function() {
    var pices = $(this).val();
    var square_feet = pices * .667;
    $(this).closest('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%;"> <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>在较新版本的jQuery中已弃用。 http://api.jquery.com/delegate/
您可能想使用delegate()而不是on() https://api.jquery.com/on/

Answer 2

尝试使用此代码

使用$(this).closest('tr').find('td .square_feet') closest查找其父tr

$(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();
    var td = $(this).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;

      // alert($(this).closest('tr').find('td .square_feet').val());
      //td.find('.square_feet').val(square_feet);
      $(this).closest('tr').find('td .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>

Answer 3

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

$("#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表中计算单独的值

3 个答案: