使每个特定单元格在 php 中的 HTML 表格中可点击答案

【问题标题】：Make each specific cell clickable in a HTML table in php使每个特定单元格在 php 中的 HTML 表格中可点击
【发布时间】：2021-01-08 05:45:57
【问题描述】：

我有一个如下所示的 HTML 表格：

<table class="table table-bordered table-sm res-table" id="reservationtable">
        <thead>
            <tr>
                <th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l") . "</span><br>" . date("d.m.Y"); ?></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+1 day")). "</span><br>" . date("d.m.Y", strtotime("+1 day")); ?></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+2 day")). "</span><br>" . date("d.m.Y", strtotime("+2 day")); ?></th>
                <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+3 day")). "</span><br>" . date("d.m.Y", strtotime("+3 day")); ?></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="col" class="td-border-right">Zeit</th>
                <th scope="col">Platz 1</th>
                <th scope="col">Platz 2</th>
                <th scope="col" class="td-border-right">Platz 3</th>
                <th scope="col">Platz 1</th>
                <th scope="col">Platz 2</th>
                <th scope="col" class="td-border-right">Platz 3</th>
                <th scope="col">Platz 1</th>
                <th scope="col">Platz 2</th>
                <th scope="col" class="td-border-right">Platz 3</th>
                <th scope="col">Platz 1</th>
                <th scope="col">Platz 2</th>
                <th scope="col" class="td-border-right">Platz 3</th>
            </tr>
            <tr>
                <th scope="row" class="td-border-right">08:00</th>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
            </tr>
            <tr>
                <th scope="row" class="td-border-right">09:00</th>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
                <td></td>
                <td></td>
                <td class="td-border-right"></td>
            </tr>
</tbody>
    </table>

我想要做的是在单击单元格时打开一个引导模式，然后可以使用它来填充单元格。但为此，我需要获取以某种方式单击的特定单元格。我没有在网上找到任何具体的东西，希望你能帮助我。

干杯，赞格勒

【问题讨论】：

event 事件的event 属性将允许访问使用event.target 单击的单元格
在这种情况下，您需要为每个单元格（如 cell1、cell2、cell3 ......等）提供唯一的 ID。之后使用带有相关税的超链接或按钮并添加您的功能，然后缓存您提供给单元格的参考 ID 中的数据。
@ProfessorAbronsius 这似乎有效，非常感谢您的帮助！
很高兴我能够提供一些帮助。剩下的编码祝你好运
这能回答你的问题吗？ Javascript onClick event in all cells

标签： javascript html-table cell

【解决方案1】：

当点击表格单元格时，下面的 javascript 将触发一些基本操作 - 如何处理点击事件取决于您，但您可以使用回调来运行您希望的任何例程

const clickcallback=function(e){
    e.target.style.background='red';
    // alternatively you can use `this` to access the element in this instance
    alert(this)
}

document.querySelectorAll('table#reservationtable td').forEach( td=>{
    td.addEventListener('click',clickcallback)
})

<table class="table table-bordered table-sm res-table" id="reservationtable">
    <thead>
        <tr>
            <th scope="col" class="theader-text td-border-right"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg></th>
            <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l") . "</span><br>" . date("d.m.Y"); ?></th>
            <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+1 day")). "</span><br>" . date("d.m.Y", strtotime("+1 day")); ?></th>
            <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+2 day")). "</span><br>" . date("d.m.Y", strtotime("+2 day")); ?></th>
            <th scope="col" class="theader-text td-border-right" colspan="3"><?php echo "<span class='theader-text-nonstrong'>" . date("l", strtotime("+3 day")). "</span><br>" . date("d.m.Y", strtotime("+3 day")); ?></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="col" class="td-border-right">Zeit</th>
            <th scope="col">Platz 1</th>
            <th scope="col">Platz 2</th>
            <th scope="col" class="td-border-right">Platz 3</th>
            <th scope="col">Platz 1</th>
            <th scope="col">Platz 2</th>
            <th scope="col" class="td-border-right">Platz 3</th>
            <th scope="col">Platz 1</th>
            <th scope="col">Platz 2</th>
            <th scope="col" class="td-border-right">Platz 3</th>
            <th scope="col">Platz 1</th>
            <th scope="col">Platz 2</th>
            <th scope="col" class="td-border-right">Platz 3</th>
        </tr>
        <tr>
            <th scope="row" class="td-border-right">08:00</th>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
        </tr>
        <tr>
            <th scope="row" class="td-border-right">09:00</th>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
            <td></td>
            <td></td>
            <td class="td-border-right"></td>
        </tr>
    </tbody>
</table>

【讨论】：