如何实现弹窗选择科目并填入对应 timetable 单元格（解决单ID生效问题）

我正在制作课程表，需求是点击表格单元格时弹出包含各学科的弹窗，选中科目后弹窗关闭，且该科目填入点击的单元格。但现有代码仅对带有id="selectText"的单个单元格生效，无法实现所有单元格独立选择并填入内容。

原代码 #

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>
</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元素。

1. 调整HTML（规范管理可点击单元格） #

去掉单个单元格的id="selectText"，给所有可点击的单元格统一加类class="class-cell"，并修改点击事件传递当前元素：

<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 class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
    </div>
    <div class="row">
        <p>2</p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
        <p class="class-cell" onclick="openPopUp(this)"></p>
    </div>
</div>

2. 修改JavaScript（记录当前单元格并动态填入内容） #

新增变量存储当前点击的单元格，在选择科目时将内容填入该单元格：

let popUp = document.querySelector(".popup-table");
let closePopUp = document.querySelector(".close-popup");
let options = document.getElementsByClassName("options");
let currentCell = null; // 存储当前点击的单元格

function openPopUp(cell) {
    currentCell = cell; // 记录点击的单元格
    popUp.classList.add("show");
}

function closingPopUp() {
    popUp.classList.remove("show");
    currentCell = null; // 关闭弹窗后清空记录
}

for(let option of options){
    option.onclick = function(){
        if(currentCell) { // 确保有选中的单元格
            currentCell.innerHTML = this.textContent;
            closingPopUp();
        }
    }
}

3. 可选优化：事件委托（适配动态单元格） #

如果后续需要动态添加课程表单元格，用事件委托代替逐个绑定onclick，更高效且无需重复绑定事件：

HTML 调整（去掉单元格的onclick）

<div class="table">
    <!-- ... 其他内容 ... -->
    <div class="row extra">
        <p>1</p>
        <p class="class-cell"></p>
        <p class="class-cell"></p>
        <p class="class-cell"></p>
        <p class="class-cell"></p>
        <p class="class-cell"></p>
    </div>
    <!-- ... 其他内容 ... -->
</div>

JavaScript 新增事件监听

// 给表格容器绑定点击事件，自动识别可点击单元格
document.querySelector(".table").addEventListener("click", function(e) {
    if(e.target.classList.contains("class-cell")) {
        currentCell = e.target;
        popUp.classList.add("show");
    }
});

内容的提问来源于stack exchange，提问作者Dunkelbunt