如何通過 ajax 設置相同輸入字段但在不同行中的值

Question

我有一個表格，我可以通過 jquery 創建一個新行。 我面臨的問題是，當我 select 來自下拉列表的產品時，它必須將此產品的速率設置為下一列。 第一行做得很好。 但是當我創建新行和 select 產品時，它給出了正確的值，但在第一行的列上設置了值。 我不知道如何為相應的列設置值。 截屏

正如您在圖片中看到的，我 select 是牛奶產品，它在我創建新行時將值設置為下一列，並將 select 產品設置為第一行的列。

function 的代碼，返回產品的下拉值

function fill_unit_select_box($con)
{
    $output = '';
    $query = "SELECT * FROM `stock` INNER JOIN product ON stock.product_id = product.product_id
              WHERE stock.product_id = product.product_id ORDER BY product_name ASC";
    $query1=mysqli_query($con,$query);

    while($row=mysqli_fetch_array($query1))
    {
        $output .= '<option value="'.$row["product_id"].'">'.$row["product_name"].'</option>';
    }
    return $output;
}

通過 jquery 創建的表格代碼

$(document).on('click', '.add', function(){
            var html = '';
            html += '<tr>';
            html += '<td><select name="item_name[]" onchange="product_id(this)" class="form-control item_name"><option value="">Select Unit</option><?php echo fill_unit_select_box($con); ?></select></td>';
            html += '<td><input type="text" disabled name="item_per_unit_price[]" id="product_price" class="form-control item_per_unit_price input" /></td>';
            html += '<td><input type="text" name="item_quentity[]"  class="form-control item_quentity input" /></td>';
            /*html += '<td><input type="text" name="item_total_price[]"  class="form-control item_total_price" /></td>';*/
            html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
            $('#item_table').append(html);
        });

onchange 代碼 function 設置單位價格值

function product_id(str) {
        var id = str.value;
        $.ajax({
            type : "POST",
            url : "stock.php?page=stock_per_unit_price",
            data : {
                id:id
            },
          success: function (data) {
                console.log(data);
                $("#product_price").val(data);

            }
        });
    }

$("#product_price").val(data); 我不知道如何在不同行的同一列上設置值。

Answer 1

要在相應行中設置價格，需要將第二個參數傳遞給您的product_id() function 以識別當前行。 這可以像下面的例子一樣完成：

 $(document).ready(function() { $(document).on("change", "select", function() { let value = $(this).val(); let row = $(this).closest("tr").index(); product_id(value, row); }); function product_id(value, row) { for (var k in dataset) { if (value == k) { let price = dataset[k]; $("tr:eq(" + row + ")").find(".product_price").val(price) } } } dataset = {"1": "10 €", "2": "20 €"} });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><select> <option value="">Select Unit</option> <option value="1">1</option> <option value="2">2</option> </select></td> <td><input class="product_price"/></td> </tr> <tr> <td><select> <option value="">Select Unit</option> <option value="1">1</option> <option value="2">2</option> </select></td> <td><input class="product_price"/></td> </tr> </table>