У меня есть проблема, когда я должен получить сумму нескольких значений входных элементов, названных как num_1, num_2, num_3, ... Поэтому я хочу использовать функцию JavaScript, чтобы добавить значения вышеуказанных элементов и отобразить их вблок / метка динамически, поэтому, когда пользователь добавляет / изменяет значения в блоке, результирующее значение также должно динамически меняться.
Мой код
<form>
<table id="table1">
<tr>
<th>Year 1 Amount</th>
<th>Year 2 Amount</th>
<th>Year 3 Amount</th>
<th>Amount yet to transfer if any</th>
</tr>
<tr>
<td><input type="number" name="year910amt_1" id="year910amt_1" style='width:100%;'></td>
<td><input type="number" name="year1011amt_1" id="year1011amt_1" style="width:100%;"></td>
<td><input type="number" name="year1112amt_1" id="year1112amt_1" style="width:100%;"></td>
<td><input type="number" name="amttranfer_1" id="amttranfer_1" style="width:100%;"></td>
</tr>
</table>
<input type='button' value='Add more' id='addmore'>
<table id="table2" style="width:100%; display:none;" >
<tr class=' '>
<td colspan="4">Total amount</td>
<td><input type="text" name="totalamt1" id="totalamt1"></td><!--should carry sum of inputs of id=year910amt_1-n-->
<td><input type="text" name="totalamt2" id="totalamt2"></td><!--should carry sum of inputs of id=year1011amt_1-n-->
<td><input type="text" name="totalamt3" id="totalamt3"></td><!--should carry sum of inputs of id=year1112amt_1-n-->
<td><input type="text" name="totalamt4" id="totalamt4"></td><!--should carry sum of inputs of id=amttranfer_1-n-->
</tr>
</table> <br />
<input type="submit" name="submit" value="submit">
</form>
Iесть функция, которая может добавлять больше строк: id = "amttranfer_n", id = "year1112amt_n", и т. д., где n - последний входной идентификатор.это зависит от пользователя, сколько строк он должен добавить,
Я хочу, чтобы сумма всех строк одного столбца динамически добавлялась в поле, указанном выше
Может кто-нибудь помочь с решением
Я сейчас использую этот скрипт, который не работает:
<script>
// Get last id
var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastname_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
$(document).on("change", "#year910amt_"+index, function() {
var sum = 0;
$("#year910amt_"+index).each(function(){
sum += +$(this).val();
});
$("#totalamt1").val(sum);
});
</script>
Примечание: это для одного столбца, я буду использовать 4 сценария / функции для другого столбцатипы