时间戳

首页 > 解决方案 > 如何操作带有附加了jquery的id属性的行

javascript - 如何操作带有附加了jquery的id属性的行

问题描述

在为我糟糕的英语道歉之前

我有一个输入表，带有行 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)
            }
        })
    })
});

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

标签： javascriptphpjquerybootstrap-4codeigniter-3

解决方案

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

$(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)
            }
        })
    })
  }
});

推荐阅读