在表上创建新行时功能不起作用

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())

        });

我试图改变很多东西，但它不起作用。

Answer 1

您不能在 HTML 中复制 ID。您可以将行号保存在每次添加新行时递增的变量中，并使用该变量生成 ID：$(function() {&nbsp; let row = 1;&nbsp; $('#addRow').click(function() {&nbsp; &nbsp; row++;&nbsp; &nbsp; 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>';&nbsp; &nbsp; $('tbody').append(temp_td)&nbsp; });&nbsp; $(document).on('click', '.remove', function() {&nbsp; &nbsp; $(this).parents('tr').remove();&nbsp; });});function calculate(r) {&nbsp; var price = document.getElementById('price' + r).value;&nbsp; var qt = document.getElementById('qt' + r).value;&nbsp; var ttl = document.getElementById('ttl' + r);&nbsp; var multiply = price * qt;&nbsp; ttl.value = multiply;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><div class="table-responsive container">&nbsp; <table class="table">&nbsp; &nbsp; <thead class="dark">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">SL.</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Item Description</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Price</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Qty.</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Total</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Del</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="row">1</th>&nbsp; &nbsp; &nbsp; &nbsp; <td><label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td><label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="price1" oninput="calculate(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="qt1" oninput="calculate(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="ttl1" name='total'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="remove">-</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; <button id="addRow">+ Add</button>如果您愿意，您也可以对名称执行此操作。我在上面的代码中没有这样做，因为它对于这个答案不是必需的。或者，您可以将元素本身传递给calculate()函数，然后使用 jQuery 查找其他“兄弟”元素。所以你根本不需要身份证。