This is the code that i have.(not mine from internet) Now i want to add some option that when cell is created, i want to add some unique ID to each cell, and then when clicking on some cell i will be able to see that ID. how can i do this?
<!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>