[英]Jquery: calculation in each row of a table showing same result in each row
我有一个具有动态功能的表以添加行。 这意味着用户可以添加任意数量的结果。
这些行具有一个选择字段和一个文本输入字段。 当用户从选择字段中选择一个值时,将用Ajax调用给出的结果乘以表单上的另一个输入字段来填充文本输入字段。
我得到了结果,但是问题是每一行中的每个文本输入都填充了相同的结果。
这是我的代码:HTML
<table>
<tr class="items2"><td><select id="Account" value="1">ajax text</td><td><input class "amount"/></td></tr>
<tr class="items2"><td><select id="Account-1" value="2">ajax text</td><td><input class "amount"/></td></tr>
</table>
jQuery:
<script>
$("select[id*='Account']").change(function(){
subjectId=$(this).val();
console.log(subjectId);
var sale=$("#id_sale").val();
console.log(sale);
request_url = '{% url "taxrate" pk=0 %}'.replace('0', subjectId);
console.log( "request_url = " + request_url);
$.ajax({
url: request_url,
type: "GET",
dataType: 'json',
}).done(function(data, textStatus, jqXHR) {
$.each(data, function(n, obj){
$("tr.items2").each(function () {
$('.amount',this).val( ((sale*obj.fields.rate)/100).toFixed(2));
})
})
})
});
</script>
我的代码有什么错误? 我只是前端的新手。
图像:在图像中,您可以看到两个框中的文本输入均显示140。 但是,仅当我选择另一行选择项时,它才应显示金额。 应根据为该行传递的ajax值计算金额。
没有ajax部分的JSfiddle:
https://jsfiddle.net/tL86dsmc/
$("select[id*='Account']").change(function(){ subjectId=$(this).val(); var sale=$("#id_sale").val(); var tax_rate = ((sale * .10)).toFixed(2); $(".amount").val(tax_rate); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="id_sale" value=100> <table> <tr class="items2"> <td> <select id="Account-1" value="1"> <option value="" selected="selected">---------</option> <option value="1">tax @18%</option> <option value="2">Tax @ 17%</option> </select> </td> <td> <input id="amount-2" class="amount"> </td> </tr> <tr class="items2"> <td> <select id="Account-2" value="1"> <option value="" selected="selected">---------</option> <option value="1">tax @18%</option> <option value="2">Tax @ 17%</option> </select> </td> <td> <input id="amount-2" class="amount"> </td> </tr> </table>
使用课程尝试
<script>
$(".items2").change(function(){
subjectId=$(this).val();
console.log(subjectId);
var sale=$("#id_sale").val();
console.log(sale);
request_url = '{% url "taxrate" pk=0 %}'.replace('0', subjectId);
console.log( "request_url = " + request_url);
$.ajax({
url: request_url,
type: "GET",
dataType: 'json',
}).done(function(data, textStatus, jqXHR) {
$("tr.items2").each(function () {
$(this).find('.amount').val(((sale*obj.fields.rate)/100).toFixed(2));
})
})
});
</script>
由于attribute-contains-selector ,您得到的结果与每次用户添加行时脚本获得的结果相同,脚本选择值为value = 1的id,并将其值插入到输入文本字段中。 您可以尝试使用该类在脚本中更改ID选择。
它应该是,
$(this).parent().next().find('input.amount')
.val(((sale * data[0].fields.rate) / 100).toFixed(2));
删除这部分
$.each(data, function(n, obj) {
$("tr.items2").each(function() {
$('.amount', this).val(((sale * obj.fields.rate) / 100).toFixed(2));
})
})
问题
$('.amount',this).
将访问每个输入元素,而不管更改了选择控件如何。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.