通過html表中的php + ajax更新第二個select選項，其中通過javascript函數添加新行

Question

在此圖像中，我通過javascript代碼使用該按鈕添加了行：

function addRow(dataTable) {
    "use strict";
    var table = document.getElementById("dataTable");
    var rowCount = table.rows.length;
    if(rowCount < 100) {
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }   
     } else {
        alert("En fazla 100 satır ekleyebilirsiniz.");
    }
}

而且我正在通過這些代碼更改第二選擇的選項值：

function fetch_select(val) {
    $.ajax({
        type: 'post',
        url: 'stoklari_cek.php',
        data: {get_option:val},
        success: function (response) {
            document.getElementById("sth_stok_kod").innerHTML=response; 
        }
    });
}

在表格的第一行，我通過更改第一選擇來檢索第二個選項的值。 我需要做的是當我使用“添加行”按鈕添加時使其也可以在其他行中使用。 我的意思是，當我將第二行添加到表中並更改第一個選擇選項值時，第一行的第二個選擇選項值正在更改。 但是我需要第二行第二選擇選項的值進行更改。

Answer 1

嘗試將addRow函數更改為以下內容。 這里的想法是確保您創建的每一行在下拉列表（選擇）中都具有唯一的ID。

function addRow(dataTable) {
    var table = document.getElementById("dataTable");
    var rowCount = table.rows.length;
    if(rowCount < 100) {
        var row = table.insertRow(rowCount);
        var newrow = table.rows[0].cloneNode(true); // clone the first row
        var selects = newrow.getElementsByTagName('select'); // get all selects in row
        for(var i=0; i<selects.length;i++) {
            selects[i].id = Math.random().toString(36).slice(2); // generate random id's
        }
        table.appendChild(newrow);   
     } else {
        alert("En fazla 100 satır ekleyebilirsiniz.");
    }
}

在調用fetch_select函數中，必須獲取要更改的第二個選擇的ID 。 然后，您將必須將此id作為參數傳遞給fetch_select 。 因此，您的fetch_select也必須更改為類似的內容。

function fetch_select(val, select_id) {
    $.ajax({
        type: 'post',
        url: 'stoklari_cek.php',
        data: {get_option:val},
        success: function (response) {
            document.getElementById(select_id).innerHTML=response; 
        }
    });
}