在表上创建新行时不起作用的函数

Question

我有一个html表，当用户单击按钮时，我会动态添加行。我的表格每行的两个单元格的编号应该相乘。我做了一个可以乘以 2 个单元格编号的函数，但是当我通过按add button创建新行时，该功能在新行上不起作用，它总是适用于表上的第一行。

这是 HTML 代码：

<div class="table-responsive container">
<table class="table">
<thead class="dark">
<tr>
<th scope="col">SL.</th>
<th scope="col">Item Description</th>
<th scope="col">Price</th>
<th scope="col">Qty.</th>
<th scope="col">Total</th>
<th scope="col">Del</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><label>
<input type="text" name="name">
</label>
</td>
<td><label>
<input type="text" id="price" oninput="calculate()">
</td>
<td>
<input type="text" id="qt" oninput="calculate()">
</td>
<td>
<input type="text" id="ttl" name='total'>
</td>
<td>
<button class="remove">-</button>
</td>
</tr>
</tbody>
</table>
<button id="addRow">+ Add</button>
</div>

这是JavaScript代码：

let temp_td = '<tr>' +
'<th scope="row">1</th>' +
'<td><label><input type="text" name="name"></label></td>' +
'<td><label><input type="text" id="price" oninput="calculate()"></td>' +
'<td><input type="text" id="qt" oninput="calculate()"></td>' +
'<td><input type="text" id="ttl" name="total"></td>' +
'<td><button class="remove">-</button></td>' +
'</tr>';
$(function () {
$('tbody').sortable();
$('#addRow').click(function () {
$('tbody').append(temp_td)
});
$(document).on('click', '.remove', function () {
$(this).parents('tr').remove();
});
$('#getValues').click(function () {
const total = [];
let sum = 0;
$('input[name="total"]').each(function (i, elem) {
total.push($(elem).val())
});
for (let i = 0; i < total.length; i++) {
sum += Number(total[i])
}
console.log(total.join(','));
console.log(total);
console.log(sum);
document.getElementById('subtotal').innerHTML = sum;
document.getElementById('total').innerHTML = sum + (sum * 5 / 100);
// document.getElementById('total22').innerHTML = sum;
})
});
function calculate() {
var price = document.getElementById('price').value; 
var qt = document.getElementById('qt').value;
var ttl = document.getElementById('ttl');   
var multiply = price * qt;
ttl.value = multiply;
}

我试图改变很多东西，但它没有奏效。

Answer 1

不能在 HTML 中复制 ID。您可以将行号保存在每次添加新行时递增的变量中，并使用该变量生成 ID：

$(function() {
let row = 1;
$('#addRow').click(function() {
row++;
let temp_td = '<tr><th scope="row">' + row + '</th><td><label><input type="text" name="name"></label></td><td><label><input type="text" id="price' + row + '" oninput="calculate(' + row + ')"></td><td><input type="text" id="qt' + row + '" oninput="calculate(' + row + ')"></td><td><input type="text" id="ttl' + row + '" name="total"></td><td><button class="remove">-</button></td></tr>';
$('tbody').append(temp_td)
});
$(document).on('click', '.remove', function() {
$(this).parents('tr').remove();
});
});
function calculate(r) {
var price = document.getElementById('price' + r).value;
var qt = document.getElementById('qt' + r).value;
var ttl = document.getElementById('ttl' + r);
var multiply = price * qt;
ttl.value = multiply;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="table-responsive container">
<table class="table">
<thead class="dark">
<tr>
<th scope="col">SL.</th>
<th scope="col">Item Description</th>
<th scope="col">Price</th>
<th scope="col">Qty.</th>
<th scope="col">Total</th>
<th scope="col">Del</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><label>
<input type="text" name="name">
</label>
</td>
<td><label>
<input type="text" id="price1" oninput="calculate(1)">
</td>
<td>
<input type="text" id="qt1" oninput="calculate(1)">
</td>
<td>
<input type="text" id="ttl1" name='total'>
</td>
<td>
<button class="remove">-</button>
</td>
</tr>
</tbody>
</table>
<button id="addRow">+ Add</button>

如果您愿意，也可以对名称执行此操作。我没有在上面的代码中这样做，因为它对于这个答案不是必需的。

或者，您可以将元素本身传递给calculate()函数，然后使用 jQuery 查找其他"同级"元素。所以你根本不需要身份证。