单击后更改颜色并停止功能（仅限 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++){

  tdTag[i].addEventListener('click', clickedFunction);

}

function clickedFunction(){

  if(!this.classList.contains('clicked')){

      this.classList.add('clicked');

      this.style.background = "red";

  }

}