Как манипулировать строками с помощью атрибута id с добавлением jquery

Question

Прежде чем извините за мой плохой английский sh

У меня есть входная таблица с идентификатором строки, когда входное значение 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)
            }
        })
    })
  }
});