Dunkelbunt
October 6, 2023
255 views
0 votes
2 Answers

I’m in the process of creating a timetable. If I click on a
Tables, a pop-up window will open in which the individual subjects are included. If I select an option from there, the pop-up window should close and the selected option should be entered in the table.

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();
    }
}

The whole thing only works if I assign an Id and not on a Class. But I can only change this one table field.

Maybe someone can help me make this work and I can make a selection individually in each table field.

Answers

To make your code work for multiple table fields, you can use the event.target property to get the element that was clicked on. You can then use the id or class of that element to determine which table field to update.

Here is a modified version of your code that works for multiple table fields:

<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();
  };
}

This code works by passing the element that was clicked on to the openPopUp() function. The openPopUp() function stores this element in a property called clickedElement. When the user clicks on an option in the pop-up window, the closingPopUp() function is called. This function updates the innerHTML of the clickedElement with the text of the option that was clicked on. It then closes the pop-up window.

You can use this same approach to update any table field, regardless of whether it has an ID or a class.

You could cache the currently active element, please see the example:

let row = document.querySelectorAll(".row");
let popUp = document.querySelector(".popup-window");
let closePopUp = document.querySelector(".close-popup");
let options = document.getElementsByClassName("options");
let activeElement;

function openPopUp(element) {
    popUp.classList.add("show");
    activeElement = element;
}

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

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

.popup-window {
  display: none;
  position: absolute;
  inset: 0;
  gap: 1em;
  background-color: white;
}

td {
  background-color: lightgrey;
}

.show {
  display: flex;
}

<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>
    
    <table class="table">
        <tr class="row headline">
            <th>Std</th>
            <th>Mo</th>
            <th>Di</th>
            <th>Mi</th>
            <th>Do</th>
            <th>Fr</th>
        </tr>
        <tr class="row extra">
            <td>1</td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
        </tr>
        <tr class="row">
            <td>2</td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
        </tr>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Add options from Pop-Up to Table

HTML

JavaScript

Answers