HTML ⛶ <TABLE class="chessboard" border=5 cellspacing=0> <TR> <TD class="white" id=cell00 onClick="selectCell(0,0);">♜</TD> <TD class="black" id=cell01 onClick="selectCell(0,1);">♞</TD> </TR> <TR> <TD id=cell10 onClick="selectCell(1,0);" class="black">♟</TD> <TD id=cell11 onClick="selectCell(1,1);" class="white">♟</TD> </TR> </TABLE>
CSS 🛠⛶ body { background-color: #111; } .chessboard TD { width: 40px; height: 40px; padding: 5px; text-align: center; font-size: 30px; } .black { background-color: #B475C2; } .white { background-color: #FFFFFF; }
JavaScript ⛶ var selectedCell = false; var selectedColor = ""; var cell; function selectCell(row,col) { if (selectedCell==false) { cell = document.getElementById("cell" + row + col); selectedColor = cell.style.backgroundColor; cell.style.backgroundColor = "#FF0000"; selectedCell = true; } else { cell.style.backgroundColor = "#FFFFFF"; var newCell = document.getElementById("cell" + row + col); newCell.innerHTML = cell.innerHTML; cell.innerHTML = "" cell.style.backgroundColor = selectedColor; selectedCell = false; } }