У меня есть таблица с двумя входами на строку, и я пытаюсь вычислить разницу между каждым входом для этой строки и отобразить ее в третьем столбце.
Я огляделся и попробовал ответы отсюда здесь, здесь и здесь, а также другие, и никто, похоже, не работает для меня.
$(".calibration_input_lin").blur(function(){
var input = $(this)
var val = input.val()
var row = input.parents('tr').eq(0)
var req = input.closest('td').prev().val()
var res = $(".resolution").data("resolution")
var diff = difference = val - req
var diff = diff.toFixed(res)
$.ajax({
url: "<%= customer_asset_calibration_header_path(@customer,@asset,@calibration_header) %>",
data: { value: val }
}).done(function( response ) {
row.find(".calibration_lin_input_diff").text(diff)
window.alert(req);
});
// or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
<thead>
<tr>
<th>Weights</th>
<th>Required</th>
<th>Actual</th>
<th>Difference</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>
<td> class ="calibration_lin_input_diff"></td>
</tr>
</tbody>
<table>
Я использую тот же скрипт в другом месте, и он отлично работает, когда переменная req
статична по всем строкам таблицы. Я просто не могу заставить его забрать вход в td 2.
Любая помощь будет оценена по достоинству.
Вместо использования blur
вы можете использовать input
. Вы можете настроить таргетинг на родительский элемент, чтобы получить входное значение prev()
td при каждом изменении ввода.
Вы должны установить начальное значение как 0
когда на input
нет значения. Вы можете сделать это, используя тернарный оператор.
В HTML не содержится элемента с .resolution
, данные которого используются в toFixed()
.
Вы можете попробовать следующее:
$(".calibration_input_lin").on('input', function(){
var input = $(this)
var val = input.val()? input.val() : 0;
var row = input.parents('tr').eq(0)
var req = input.parents('td').prev('td').find('input').val();
req = req ? req : 0;
//var res = $(".resolution").data("resolution")
var diff = val - req;
var diff = diff.toFixed(2);
$(this).parents('tr').find('.calibration_lin_input_diff').text(diff);
// or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
<thead>
<tr>
<th>Weights</th>
<th>Required</th>
<th>Actual</th>
<th>Difference</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
<tr>
<td></td>
<td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
<td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>
<td class ="calibration_lin_input_diff"></td>
<td>
</tr>
</tbody>
<table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
на мою страницу, она отключает форматирование для выбранный селектор, который находится в 1-й тд - ты видел это? Кроме того, в первом TD также вход повлияет на ваш ответ?
td
.....
var row = input.closest('tr')
$(".calibration_input_lin").blur
? Как я понимаю, вам нужно перебирать все строки и вычислять разницу между первыми 2 полями в строке?