如何操作附加了 jquery 的 id 属性的行

Question

在为我的英语不好而感到抱歉之前

我有一个带有行 id 的输入表，当 onchange 输入影响第 1 行中的下一个输入时。现在可以添加这一行，我对添加的每一行进行了增量，因此 id 行将添加到 row2, row3等等。 这里的问题是，如何操作已添加的行

这是视图

<table class="table-common mb-4">
            <tr>
                <th>Product</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Account</th>
                <th>Tax</th>
                <th>Total</th>
            </tr>
            <tr id="row1" class="item">
                <td>
                    <select name="product[]" class="form-control form-control-select2 product">
                        <option value="">Choose one</option>
                        <?php
                        foreach ($productIds as $productId) {
                            $selected = getValue('productId', $row) == $productId->id ? 'selected' : NULL;

                            echo "<option value='{$productId->id}'>{$productId->code} - {$productId->name}</option>";
                        }
                        ?>
                    </select>
                </td>
                <td><input type="text" name="description[]" class="form-control description"></td>
                <td><input type="text" name="quantity[]" class="form-control form-control-decimal quantity"></td>
                <td><input type="text" name="unitPrice[]" class="form-control form-control-decimal unitPrice"></td>
                <td>
                    <select name="account[]" class="form-control form-control-select2 account">
                        <option value="">Choose one</option>
                        <?php
                        foreach ($accountIds as $accountId) {
                            $selected = getValue('accountId', $row) == $accountId->id ? 'selected' : NULL;

                            echo "<option value='{$accountId->id}'>{$accountId->code} - {$accountId->name}</option>";
                        }
                        ?>
                    </select>
                </td>
                <td>
                    <select name="tax[]" class="form-control form-control-select2 tax">
                        <option value="">Choose one</option>
                        <?php
                        foreach ($taxIds as $taxId) {
                            $selected = getValue('taxId', $row) == $taxId->id ? 'selected' : NULL;

                            echo "<option value='{$taxId->id}'>{$taxId->name} - {$taxId->amount}</option>";
                        }
                        ?>
                    </select>
                </td>
                <td><input type="text" name="totalPrice[]" class="form-control form-control-decimal totalPrice" readonly></td>
            </tr>
        </table>

当点击添加更多

$(document).ready(() => {
    let previousRow = $("tr:last").attr("id")
    let counter = previousRow.charAt(3)
    let count = parseInt(counter)
    let no = 0
    $("#addMore").on('click', (e) => {
        count ++
        no = count

        $(".table-common").append(`
            <tr id="row${count}" class="item">
                <td>
                    <select name="product[]" class="form-control form-control-select2 product">
                        <option value="">Choose one</option>
                        <?php
                        foreach ($productIds as $productId) {
                            $selected = getValue('productId', $row) == $productId->id ? 'selected' : NULL;

                            echo "<option value='{$productId->id}'>{$productId->code} - {$productId->name}</option>";
                        }
                        ?>
                    </select>
                </td>
                <td><input type="text" name="description[]" class="form-control description"></td>
                <td><input type="text" name="quantity[]" class="form-control form-control-decimal quantity"></td>
                <td><input type="text" name="unitPrice[]" class="form-control form-control-decimal unitPrice"></td>
                <td>
                    <select name="account[]" class="form-control form-control-select2 account">
                        <option value="">Choose one</option>
                        <?php
                        foreach ($accountIds as $accountId) {
                            $selected = getValue('accountId', $row) == $accountId->id ? 'selected' : NULL;

                            echo "<option value='{$accountId->id}'>{$accountId->code} - {$accountId->name}</option>";
                        }
                        ?>
                    </select>
                </td>
                <td>
                    <select name="tax[]" class="form-control form-control-select2 tax">
                        <option value="">Choose one</option>
                        <?php
                        foreach ($taxIds as $taxId) {
                            $selected = getValue('taxId', $row) == $taxId->id ? 'selected' : NULL;

                            echo "<option value='{$taxId->id}'>{$taxId->name} - {$taxId->amount}</option>";
                        }
                        ?>
                    </select>
                </td>
                <td><input type="text" name="totalPrice[]" class="form-control form-control-decimal totalPrice" readonly></td>
                <td><button type="button" class="btn btn-danger btn-sm delete"><i class="icon ion-close-round"></i></button></td>
            </tr>
        `)
    })

    $(`#row1 .product`).on("change", () => {
        let productId = $(".product option:selected").val()

        $.ajax({
            url: `<?php echo base_url("accounting/configurations/products/index/") ?>${productId}`,
            type: 'get',
            dataType: 'json',
            success: (data) => {
                $("#row1 .description").val(data.description)
                $("#row1 .description").val()
                $("#row1 .unitPrice").val(data.sellPrice)
                $("#row1 .sellAccountId").val(data.sellAccountId)
                $("#row1 .sellTaxId").val(data.sellTaxId)
            }
        })
    })
});

那么，添加其他行时如何操作？

Answer 1

追加行后，调用一个新函数，传递要操作的对象：

 $(document).ready(() => { let previousRow = $("tr:last").attr("id") let counter = previousRow.charAt(3) let count = parseInt(counter) let no = 0 $("#addMore").on('click', (e) => { count ++ no = count $(".table-common").append(` <tr id="row${count}" class="item"> <td> <select name="product[]" class="form-control form-control-select2 product"> <option value="">Choose one</option> <?php foreach ($productIds as $productId) { $selected = getValue('productId', $row) == $productId->id ? 'selected' : NULL; echo "<option value='{$productId->id}'>{$productId->code} - {$productId->name}</option>"; } ?> </select> </td> <td><input type="text" name="description[]" class="form-control description"></td> <td><input type="text" name="quantity[]" class="form-control form-control-decimal quantity"></td> <td><input type="text" name="unitPrice[]" class="form-control form-control-decimal unitPrice"></td> <td> <select name="account[]" class="form-control form-control-select2 account"> <option value="">Choose one</option> <?php foreach ($accountIds as $accountId) { $selected = getValue('accountId', $row) == $accountId->id ? 'selected' : NULL; echo "<option value='{$accountId->id}'>{$accountId->code} - {$accountId->name}</option>"; } ?> </select> </td> <td> <select name="tax[]" class="form-control form-control-select2 tax"> <option value="">Choose one</option> <?php foreach ($taxIds as $taxId) { $selected = getValue('taxId', $row) == $taxId->id ? 'selected' : NULL; echo "<option value='{$taxId->id}'>{$taxId->name} - {$taxId->amount}</option>"; } ?> </select> </td> <td><input type="text" name="totalPrice[]" class="form-control form-control-decimal totalPrice" readonly></td> <td><button type="button" class="btn btn-danger btn-sm delete"><i class="icon ion-close-round"></i></button></td> </tr> `) manipulateRow($("#row${count}")) }) function manipulateRow(obj){ obj.find('.product').on("change", () => { let productId = obj.find(".product option:selected").val() $.ajax({ url: `<?php echo base_url("accounting/configurations/products/index/") ?>${productId}`, type: 'get', dataType: 'json', success: (data) => { obj.find(".description").val(data.description) obj.find(".description").val() obj.find(".unitPrice").val(data.sellPrice) obj.find(" .sellAccountId").val(data.sellAccountId) obj.find(".sellTaxId").val(data.sellTaxId) } }) }) } });