将选项从弹出窗口添加到表格

Question

我正在制定时间表。如果我点击一个 表格，将打开一个弹出窗口，其中包含各个主题。如果我从那里选择一个选项，弹出窗口应该关闭，并且所选选项应该输入到表格中。

HTML

<div class="popup-table">
        <div class="popup-window">
            <div class="close-popup" onclick="closingPopUp()">
                <h4>X</h4>
            </div>
            <p class="options">Deu</p>
            <p class="options">Eng</p>
            <p class="options">Mat</p>
            <p class="options">Erd</p>
            <p class="options">Ges</p>
            <p class="options">Mus</p>
            <p class="options">Kun</p>
            <p class="options">Spo</p>
            <p class="options">Che</p>
            <p class="options">Phy</p>
            <p class="options">Bio</p>
            <p class="options">Fra</p>
            <p class="options">Spa</p>
            <p class="options">Pol</p>
        </div>
    </div>
    
    <div class="table">
        <div class="row headline">
            <p>Std</p>
            <p>Mo</p>
            <p>Di</p>
            <p>Mi</p>
            <p>Do</p>
            <p>Fr</p>
        </div>
        <div class="row extra">
            <p>1</p>
            <p id="selectText" onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
        </div>
        <div class="row">
            <p>2</p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
        </div>

JavaScript

let row = document.querySelectorAll(".row");
let popUp = document.querySelector(".popup-table");
let closePopUp = document.querySelector(".close-popup");
let options = document.getElementsByClassName("options");
let selectText = document.getElementById("selectText");

function openPopUp() {
    popUp.classList.add("show")
}

function closingPopUp() {
    popUp.classList.remove("show")
}

for(option of options){
    option.onclick = function(){
        selectText.innerHTML = this.textContent;
        closingPopUp();
    }
}

只有当我分配一个 ID 而不是一个类时，整个事情才有效。但我只能更改这一表字段。

也许有人可以帮助我完成这项工作，我可以在每个表字段中单独进行选择。

Answer 1

要使您的代码适用于多个表字段，您可以使用

event.target

属性来获取单击的元素。然后，您可以使用该元素的

id

或

class

来确定要更新哪个表字段。

这是适用于多个表字段的代码的修改版本：

<div class="popup-table">
  <div class="popup-window">
    <div class="close-popup" onclick="closingPopUp()">
      <h4>X</h4>
    </div>
    <p class="options">Deu</p>
    <p class="options">Eng</p>
    <p class="options">Mat</p>
    <p class="options">Erd</p>
    <p class="options">Ges</p>
    <p class="options">Mus</p>
    <p class="options">Kun</p>
    <p class="options">Spo</p>
    <p class="options">Che</p>
    <p class="options">Phy</p>
    <p class="options">Bio</p>
    <p class="options">Fra</p>
    <p class="options">Spa</p>
    <p class="options">Pol</p>
  </div>
</div>

<div class="table">
  <div class="row headline">
    <p>Std</p>
    <p>Mo</p>
    <p>Di</p>
    <p>Mi</p>
    <p>Do</p>
    <p>Fr</p>
  </div>
  <div class="row extra">
    <p>1</p>
    <p id="selectText1" onclick="openPopUp(this)"></p>
    <p id="selectText2" onclick="openPopUp(this)"></p>
    <p id="selectText3" onclick="openPopUp(this)"></p>
    <p id="selectText4" onclick="openPopUp(this)"></p>
    <p id="selectText5" onclick="openPopUp(this)"></p>
  </div>
  <div class="row">
    <p>2</p>
    <p id="selectText6" onclick="openPopUp(this)"></p>
    <p id="selectText7" onclick="openPopUp(this)"></p>
    <p id="selectText8" onclick="openPopUp(this)"></p>
    <p id="selectText9" onclick="openPopUp(this)"></p>
    <p id="selectText10" onclick="openPopUp(this)"></p>
  </div>
</div>

let popUp = document.querySelector(".popup-table");
let closePopUp = document.querySelector(".close-popup");
let options = document.getElementsByClassName("options");

function openPopUp(element) {
  popUp.classList.add("show");
  // Store the element that was clicked on so that we can update it later.
  this.clickedElement = element;
}

function closingPopUp() {
  popUp.classList.remove("show");
}

for (option of options) {
  option.onclick = function () {
    // Get the element that was clicked on.
    const clickedElement = this.clickedElement;

    // Update the innerHTML of the clicked element.
    clickedElement.innerHTML = this.textContent;

    // Close the pop-up window.
    closingPopUp();
  };
}

此代码的工作原理是将单击的元素传递给

openPopUp()

函数。

openPopUp()

函数将此元素存储在名为

clickedElement

的属性中。当用户单击弹出窗口中的选项时，将调用

closingPopUp()

函数。此函数使用单击的选项的文本更新

clickedElement

的innerHTML。然后关闭弹出窗口。

您可以使用相同的方法来更新任何表字段，无论它是否具有 ID 或类。