javascript - 通过 php+ajax 在 html 表中更新第二个选择选项，其中通过 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; 
        }
    });
}