javascript - 从下拉列表中选择选项时，将相应的数据插入到动态创建的表中

Question

当我从Add Item下拉列表中选择一个值时，该项目的详细信息将添加/显示在表中的相应输入字段中。如果我只有一排，这可以正常工作。但是当我为下一个项目添加一个新行并从Add Item下拉列表中选择一个项目时，项目的详细信息应该添加/显示在新添加的行中，但它也会影响以前添加的行。

我是 CI 新手，请帮助我。我希望我的问题很清楚，我将添加视图页面的截图。提前致谢。

物品价值 raga 更改为笔记本电脑

向表中添加行

<SCRIPT language="javascript">
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length - 1;
        var row = table.insertRow(rowCount);
        //Column 1
        var cell1 = row.insertCell(0);
        cell1.innerHTML = '<input type="text" name="item" id="item">'
        //Column 2
        var cell2 = row.insertCell(1);
        cell2.innerHTML = '<input type="number" name="qty" id="qty" onkeyup="calc()">';
        //Column 3
        var cell3 = row.insertCell(2);
        cell3.innerHTML = '<input type="number" name="rate" id="rate">';
        //Column 4
        var cell4 = row.insertCell(3);
        cell4.innerHTML = '<input type="number" name="tax" id="tax">';
        //Column 5
        var cell5 = row.insertCell(4);
        cell5.innerHTML = '<input type="number" name="amound" id="amound" readonly>';
        //Column 6
        var cell6 = row.insertCell(5);
        cell6.innerHTML = '<input id="Button" type="button" value="Delete" class="delete-row btn btn-danger"/>';
    }

    $(document).on('click', '.delete-row', function() {
        $(this).parents('tr').remove();
    });
</SCRIPT>  

用于获取数据并显示在表中相应输入字段中的脚本。

$('#productId').change(function() {
    var product_id = $('#productId').val();
    if (product_id != '') {
        $.ajax({
            url: "<?php echo base_url(); ?>admin/Add_invoice/fetch_item",
            method: "POST",
            dataType: "JSON",
            data: {
                product_id: product_id
            },
            success: function(data) {
                $('input[name="item"]').val(data.name);
                $('input[name="rate"]').val(data.price);
                $('input[name="tax"]').val(data.tax);
            }
        });
    }
});

落下

<div class="row">
    <div class="col-md-3">
        <label class="control-label">Add Item </label>
    </div>
    <div class="col-md-6">
        <select class="form-control" name="productId" id="productId">
            <option value=" ">Select an Item</option>
            <?php
            if ($product) {
                foreach ($product as $row) {

                    echo "<option value='" . $row->productId . "'>" . $row->name . "</option>";
                }
            } ?>
        </select>
    </div>
</div>

标签： javascriptphpjquery