javascript - 通过输入另一个表的值来触发一个表
问题描述
我试图通过输入另一个表的值来触发一个表的计算。有两个表,第一个有输入选项卡,称为 Profit_rate,另一个应该计算为 cost * currency_rate * profit_rate(在另一个表中),但是,当我输入 Profit_rate 时它不起作用。
JavaScript
<script>
window.onload = function() {
$(".update_row_data").change(function() {
var auto_array = {};
action = $(this).closest('tr').data('action');
form_data = $(this).closest('tr').find('input, select');
var profitRate = Number($("#profit_rate").val());
var myArray = $.map(form_data, function(element) {
auto_array[element.name] = element.value, profitRate;
});
console.log(myArray);
var pprice = $(this).closest('tr').find('.pprice');
pprice_val = Math.round(auto_array['cost'] * profitRate * auto_array['currency_rate'];
if(!isNaN(pprice_val) && pprice_val != 'Infinity') {
pprice.val(pprice_val);
}
form_data = $(this).closest('tr').find('input,select').serialize();
$.ajax({
data: {
action: action,
form_data: form_data,
},
url: 'update.php',
type: 'post',
beforeSend: function() {
},
success: function(data) {
if(data == 1){
}
}
});
});
};
</script>
html代码
<table>
<tr><td>
<input name="profit_rate" size="3" style="border-style:none" type="text" class="update_row_data profit_rate" id="profit_rate" value="<?php echo $res['profit_rate'];?>">
</td></tr></table>
<table>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="<?php echo $res["cost"];?>"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="<?php echo $res["cost"];?>"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="<?php echo $res["pprice"] ;?>"></td></tr></table>
解决方案
您需要获取next
表格以获取所有inputs
内部 tr 。在下面的代码中,我使用each
循环进行迭代,trs
然后获取所需的输入值并计算它们并将它们添加到json-array
.
演示代码:
var auto_array;
$(".profit_rate").change(function() {
var myArray = []
//find closest table->next table
var elem = $(this).closest('table').next('table');
var action = elem.find('tr').data('action');
console.log(action)
var profitRate = Number($("#profit_rate").val());
//looping
elem.find('tr').each(function() {
//get cost
var cost = $(this).find('input[name=cost]').val();
//get curency rate
var currecy_rate = $(this).find('input[name=currency_rate]').val();
//calculate profit
var profit_total = Math.round(cost * profitRate * currecy_rate)
$(this).find('input[name=pprice]').val(profit_total)
//add to json object
auto_array = {};
auto_array["cost"] = cost;
auto_array["currecy_rate"] = currecy_rate;
auto_array["pprice"] = profit_total;
myArray.push(auto_array) //push to array
});
console.log(myArray)
//your ajax call
});
//on change of cost
$(".cost").change(function() {
var cost = $(this).val();// that value
var currecy_rate = $(this).closest('tr').find(".currency_rate").val();
var profitRate = Number($("#profit_rate").val());
var profit_total = Math.round(cost * currecy_rate * profitRate); $(this).closest('tr').find('input[name=pprice]').val(profit_total)
});
//onchange of currecncy value
$(".currency_rate").change(function() {
var currency_rate = $(this).val();
var cost = $(this).closest('tr').find(".cost").val();
var profitRate = Number($("#profit_rate").val());
var profit_total = Math.round(cost * currency_rate * profitRate); $(this).closest('tr').find('input[name=pprice]').val(profit_total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="profit_rate" size="3" style="" type="text" class="update_row_data profit_rate" id="profit_rate" value="">
</td>
</tr>
</table>
<table>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="25"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="25"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="12"></td>
</tr>
<tr data-action="update_price" data-row-id="<?php echo $res['id'];?>">
<td><input name="cost" type="text" class="update_row_data cost" id="cost" value="20"></td>
<td><input name="currency_rate" type="text" class="update_row_data currency_rate" id="currency_rate" value="20"></td>
<td><input name="pprice" size="5" readonly="readonly" type="text" class="update_row_data pprice" value="12"></td>
</tr>
</table>
推荐阅读
- ode - Casadi IVP 集成商 RHSFUNC 失败
- windows - Windows 上出现 0xc0000139 错误后的更多信息
- guava - 带有 limit() 和 omitEmptyStrings() 的 Guava Splitter 不一致
- android - NavigationComponent 从 BottomNavitationView 导航
- python - QRunnable 中的计时器
- azure-devops - 在 Azure Devops 构建步骤中使用 SolutionPackager 打包 Dynamics 365 解决方案时找不到所需文件错误
- javascript - 当我部署到 Heroku 时,它给了我一个语法错误
- amazon-web-services - AWS Glue 错误 - 调用 HeadObject 操作时发生错误 (403):禁止
- python - 由于生命周期,是否使用 C 代码在 C++ 中创建 Python 扩展 UB?
- javascript - 如何使 onClick 属性定位本地文件