单击后更改颜色并停止功能（仅限 JavaScript）

Question

我有一张包含几行单元格的表格。我的任务是在单击后设置单元格，单元格值将传递到 div 块“已预订座位”。我这样做了，但仍然有一些要求需要满足。单击表格单元格（即座位号）后，单元格的背景颜色将永久更改，并且单元格不再可单击。如何编辑我的代码以添加这两个要求？顺便说一下，只允许使用 JavaScript。谢谢你：D

<table id="tab">

<caption>SCREEN</caption>

<tr>

    <td>A1</td>

    <td>A2</td>

    <td>A3</td>

    <td>A4</td>

    <td>A5</td>

</tr>

<tr>

    <td>B1</td>

    <td>B2</td>

    <td>B3</td>

    <td>B4</td>

    <td>B5</td>

</tr>

<tr>

    <td>C1</td>

    <td>C2</td>

    <td>C3</td>

    <td>C4</td>

    <td>C5</td>

</tr>

<tr>

    <td>D1</td>

    <td>D2</td>

    <td>D3</td>

    <td>D4</td>

    <td>D5</td>

</tr>

<tr>

    <td>E1</td>

    <td>E2</td>

    <td>E3</td>

    <td>E4</td>

    <td>E5</td>

</tr>

</table>

<script type="text/javascript">

    var table = document.getElementById("tab");

    if (table != null) {

        for (var i = 0; i < table.rows.length; i++) {

            for (var j = 0; j < table.rows[i].cells.length; j++)

                table.rows[i].cells[j].onclick = function () { getval(this)};

        }

    }

    function getval(cel) {

        let seatno = document.createElement("h3");

        seatno.innerHTML = cel.innerHTML;

        document.getElementById("stbk").appendChild(seatno);  

    }

</script>

Answer 1

就这么简单，只需按照以下方式操作即可。你只需要添加一个类，clicked并td在 javascript 中设置一个条件，如果td有类不做任何工作；var tdTag = document.querySelectorAll("#tab tr td");for(var i = 0; i < tdTag.length; i++){&nbsp; tdTag[i].addEventListener('click', clickedFunction);}function clickedFunction(){&nbsp; if(!this.classList.contains('clicked')){&nbsp; &nbsp; &nbsp; this.classList.add('clicked');&nbsp; &nbsp; &nbsp; this.style.background = "red";&nbsp; }}