Question

我是jQuery / JS新手，从一列的价格尝试减去折扣价值（用户输入）并将结果放到表格的另一列。

HTML

<div>
 <table id='table_one' border='1'>
  <thead>
   <tr>
    <th>Name</th>
    <th>No</th>
    <th>Qty</th>
    <th>Price A</th>
    <th>Price B</th>
   </tr>
  </thead>
   <tr>
   </tr>
 </table>
</div><br>

<form id="discount_form">Discount: 
 <input type="text" id="discount">
 <input id="submit" type="button" value="Count">
</form>

JS

var data = '[{"Name" : "Art 1","No" : "01","Qty" : "1","Price_A": 5}';
data+= ',{"Name" : "Art 2","No" : "02","Qty" : "2","Price_A": 10}';
data+= ',{"Name" : "Art 3","No" : "03","Qty" : "5","Price_A": 1.5}]';

data = $.parseJSON(data);

$(function() {
 $.each(data, function(i, item) {
  $('<tr>').append(
  $('<td>').text(item.Name),
  $('<td>').text(item.No),
  $('<td>').text(item.Qty),
  $('<td>').text(item.Price_A),
  $('<td>').text(item.Price_B)).appendTo('#table_one'); 
 });
});

$(document).ready(function() {
 $('#submit').click(function() {
  var discount = parseFloat($('#discount').val() , 10);
  update_amounts();
 });
});

function update_amounts() {
 $('#table_one tr').each(function() {
  var pricea = parseFloat($(this).find(item.Price_A).val(), 10);
  var priceb = (pricea - discount);
  $(this).find(item.Price_B).text(''+priceb);
  alert($(this).text(priceb));
 }); 
}

我认为我做错了，从列Price_A获取值：

var pricea = parseFloat($(this).find(item.Price_A).val(), 10);

此外，它假设将结果数据放到列Price_B

$(this).find(item.Price_B).text(''+priceb);

非常感谢帮助。

https://jsfiddle.net/w42zk7uy/

Answer 1

您在item.Price_A中使用了错误的update_amounts。因为您没有传递它或将其分配给此功能。我想您希望在表格列priceA和priceB上工作。因此，您可以使用以下代码。

var data = '[{"Name" : "Art 1","No" : "01","Qty" : "1","Price_A": 5}';
data+= ',{"Name" : "Art 2","No" : "02","Qty" : "2","Price_A": 10}';
data+= ',{"Name" : "Art 3","No" : "03","Qty" : "5","Price_A": 1.5}]';

// convert string to JSON
data = $.parseJSON(data);

$(function() {
    $.each(data, function(i, item) {
    $('<tr>').append(
    $('<td>').text(item.Name),
    $('<td>').text(item.No),
    $('<td>').text(item.Qty),
    $('<td>').text(item.Price_A),
    $('<td>').text(item.Price_B)).appendTo('#table_one'); 
  });
});

$(document).ready(function() {
        $('#submit').click(function() {
    var discount = parseFloat($('#discount').val() , 10);
    update_amounts();
  });
});

function update_amounts() {
 $('#table_one tbody tr').each(function() {

  var pricea = parseFloat($(this).find("td:nth-child(4)").text());
  var priceb = (pricea - parseFloat($("#discount").val())); // get discount from input text
  $(this).find("td:nth-child(5)").text(''+priceb); //Store value in priceB
 }); 
}

Fiddle Ans

Answer 2

您可以使用代码

<强> HTML：

<div>
 <table id='table_one' border='1'>
  <thead>
   <tr>
    <th>Name</th>
    <th>No</th>
    <th>Qty</th>
    <th>Price A</th>
    <th>Price B</th>
   </tr>
  </thead>   
 </table>
</div><br>

<form id="discount_form">Discount: 
 <input type="text" id="discount">
 <input id="submit" type="button" value="Count">
</form>

<强> JS：

var data = '[{"Name" : "Art 1","No" : "01","Qty" : "1","Price_A": 5}';
data+= ',{"Name" : "Art 2","No" : "02","Qty" : "2","Price_A": 10}';
data+= ',{"Name" : "Art 3","No" : "03","Qty" : "5","Price_A": 1.5}]';

data = $.parseJSON(data);

$(function() {
 $.each(data, function(i, item) {
  $('<tr>').append(
  $('<td>').text(item.Name),
  $('<td>').text(item.No),
  $('<td>').text(item.Qty),
  $('<td>').text(item.Price_A),
  $('<td>').text(item.Price_B)).appendTo('#table_one'); 
 });
});

$(document).ready(function() {
 $('#submit').click(function() {
  var discount = parseFloat($('#discount').val() , 10);
  update_amounts(discount);
 });
});

function update_amounts(discount) {
 $('#table_one tbody tr').each(function() {
   //:nth-last-child(2) Find the second last child
   var pricea = parseFloat($(this).find(':nth-last-child(2)').text(), 10);
   var priceb = (pricea - discount);
  //:last-child Find the last child
  $(this).find(':last-child').text(priceb); 
 }); 
}

尝试达到表

2 个答案: