Javascript - Select 選項正在添加到表中的下一行

Question

我正在制作一個動態表，其中輸入來自 mongo 數據庫。 第五列也是最后一列包含一個 select 選項下拉列表，如果用戶從下拉列表中單擊一個選項，該選項的文本值將顯示在第 3 列中。但是，我設計了我的代碼以確保如果該文本值已經存在在第 3 列中，然后不要再添加它。 但是，由於某種奇怪的原因，當文本值已經存在於第 3 列時，它決定將其添加到第 3 列的下一行。 我不確定為什么會發生這種情況，但我認為這可能是因為我使用了帶有 addEventListeners 的 forEach 循環而不是它。 我提供了 2 張圖片，一張是在我再次將“人力資源”添加到第 1 行之前，第二張圖片是我再次從第 1 行的下拉菜單中單擊人力資源后發生的情況。老實說，代碼可能會更好，但是我是 JavaScript 的新手。

任何幫助將不勝感激。 謝謝。

圖片：

HTML：

    <table id="productivity-table">
        <thead>
            <tr>
                <th>Resource</th>
                <th>Productive Identity</th>
                <th>Impact Area</th>
                <th>Set Productive Identity</th>
                <th>Set Impact Area</th>
            </tr>
        </thead>

        <tbody>
            <tr></tr>
        </tbody>
    </table>

JS：

//List containing all departments
var alldepts = [];
var departmentID = document.createElement('select');
//getDepartments();

//Run Functions
getResources();
var old_selected_val = [];
var select_id = 1;

//Get Resources and corresponding information and display it in a table
function getResources(){
//getDept();
getDepartments();
fetch("________", {
}).then(response => {
    return response.json();
}).then(data => {

var table = document.getElementById("productivity-table");

for(var i=0; i < data.length; i++){
  var row = table.insertRow(table.rows.length - 1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.classList.add("table-data");
  cell2.classList.add("table-data");
  cell3.classList.add("table-data");

  cell1.innerHTML = data[i].name;
  cell2.innerHTML = data[i].productive == 0 ? "No" : "Yes";

  //Cell3 - Create ul and li
  var impact_ul = document.createElement("ul");
  var impact_li = document.createElement("li");
  impact_li.innerHTML = data[i].entity;
  impact_li.setAttribute("style", "list-style-type:none");

  //Add delete button row
  var delete_span = document.createElement("span");
  delete_span.className = "delete";
  delete_span.innerHTML = "&times;"
  impact_li.appendChild(delete_span);

  impact_ul.appendChild(impact_li);
  cell3.appendChild(impact_ul);

  //Cell4 - Create select dropdown for impact area
  var cell4 = row.insertCell(3);
  cell4.classList.add("table-data");

  var impact_area = document.createElement('select');
  impact_area.setAttribute("id", "impact-area"); 

  let defaultOption = document.createElement('option');
  defaultOption.text = 'Is it Productive?';
  defaultOption.disabled = true;
  impact_area.add(defaultOption);
  impact_area.selectedIndex = 0;

  var productive_array = ["Yes", "No"];
  productive_array.forEach(item => {
    var impact_option = document.createElement("option");
    impact_option.text = item;
    impact_option.value = item;
    impact_area.appendChild(impact_option);
    cell4.appendChild(impact_area);
  })


  //Cell5 - Create department dropdown
  var dep_dropdown = document.createElement('select');
  dep_dropdown.classList.add("dep_select");
  select_id++;

  //dep_dropdown.length = 0;
  let dep_default = document.createElement('option');
  dep_default.text = 'Select Department';
  dep_default.disabled = true;
  dep_dropdown.add(dep_default);
  dep_dropdown.selectedIndex = 0;

  var cell5 = row.insertCell(4);
  alldepts.forEach(item => {
    cell5.classList.add("table-data");
    var dep_option = document.createElement("option");
    dep_option.text = item;
    dep_option.value = item;
    dep_dropdown.appendChild(dep_option);
    cell5.appendChild(dep_dropdown);

  })

    Department_Select("productivity-table", cell3, impact_ul, select_id);
    deleteButton();
}        
})
}


//Listen to department select option and update table accordingly 
function Department_Select(table_id, cell, ul, classLength) {
var table = document.getElementById(table_id);
var numRows = table.rows.length;
var i, s = null, tr, td;

  dep_select = document.querySelectorAll(".dep_select");

  dep_select.forEach(select => {
  //Get the inital select option value, to ensure the user is selecting a new value
  select.addEventListener("mouseenter", function(e){
    //Get table row number
    var rowNumber = this.parentNode.parentNode.rowIndex;

    //Store inital select option value to compare to a value that the user clicks on 
    old_selected_val[rowNumber-1] = select.value;
  });

  select.addEventListener("click", function(e){
    //Get Table row number
    var rowNumber = this.parentNode.parentNode.rowIndex;
    //Get current option value, that the user clicked on
    selected_val = select.value;

    //Checks if department already exists or not
    var Depexists = false;

    //If it's a new value, and if it doesn't already exist, add it to column 3
    if(selected_val != old_selected_val[rowNumber-1] && selected_val != "Select Department"){

      //Check if selected department already exists in list
      li_list = ul.getElementsByTagName('li');

      for (var i = 0; i < li_list.length; i++){
        //Each department has an &times x attached to it, it needs to be removed to get department name
        li_item = li_list[i].innerText;
        listed_dep = li_item.substring(0, li_item.length-1);

        //Check selected department exists
        if(selected_val == listed_dep){
          Depexists = true;
        }
      }

      //If department doesn't already exist on table, add the new department to column 3
      if(Depexists == false){
        
        //Create ul and li
        var impact_li = document.createElement("li");
        impact_li.innerHTML = selected_val;
        impact_li.setAttribute("style", "list-style-type:none");

        //Add delete button row
        var delete_span = document.createElement("span");
        delete_span.className = "delete";
        delete_span.innerHTML = "&times;"
        impact_li.appendChild(delete_span);

        ul.appendChild(impact_li);
        cell.appendChild(ul);

        //Button Listen for potential delete
        deleteButton();


        //Set the selected department value to be the old department value selected, for new incoming selections. 
        old_selected_val[rowNumber-1] = selected_val;
      }
    }
  });
});
}

Answer 1

似乎您沒有更新ul在select.addEventListener("click" function 中的引用，它指的是它已分配的最后一個引用，即下一行（實際上在最后一行中具有值第三欄）。