通过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; 
        }
    });
}