Este es el código que tengo (no el mío de Internet) Ahora quiero agregar alguna opción que cuando se crea la celda, quiero agregar una identificación única a cada celda, y luego al hacer clic en alguna celda podré ver esa identificación. ¿Cómo puedo hacer esto?
<!DOCTYPE html> <html> <head> <title>Chess board</title> <style> body { text-align: center; } .cell { height: 30px; width: 30px; border: 1.5px solid grey; border-style: inset; } .blackcell { background-color: black; } .whitecell { background-color: white; } </style> </head> <body> <script type="text/javascript"> var center = document.createElement('center'); var ChessTable = document.createElement('table'); for (var i = 0; i < 8; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 8; j++) { var td = document.createElement('td'); if ((i + j) % 2 == 0) { td.setAttribute('class', 'cell whitecell'); tr.appendChild(td); } else { td.setAttribute('class', 'cell blackcell'); tr.appendChild(td); } } ChessTable.appendChild(tr); } center.appendChild(ChessTable); ChessTable.setAttribute('cellspacing', '0'); ChessTable.setAttribute('width', '270px'); document.body.appendChild(center); </script> </body> </html>
var center = document.createElement('center'); var ChessTable = document.createElement('table'); for (var i = 0; i < 8; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 8; j++) { var td = document.createElement('td'); td.setAttribute('id','cell'+i+'_'+j) td.addEventListener('click',e=>console.log(e.target.id)) if ((i + j) % 2 == 0) { td.setAttribute('class', 'cell whitecell'); tr.appendChild(td); } else { td.setAttribute('class', 'cell blackcell'); tr.appendChild(td); } } ChessTable.appendChild(tr); } center.appendChild(ChessTable); ChessTable.setAttribute('cellspacing', '0'); ChessTable.setAttribute('width', '270px'); document.body.appendChild(center);
<!DOCTYPE html> <html> <head> <title>Chess board</title> <style> body { text-align: center; } .cell { height: 30px; width: 30px; border: 1.5px solid grey; border-style: inset; } .blackcell { background-color: black; } .whitecell { background-color: white; } </style> </head> <body> </body> </html>