javascript - How do i get the cell id of a table

Question

This is the board drawing function

this.drawBoard=function(){         
                document.write('<table id="newGame">');
                for(let i=0;i<boxes;i++){
                    document.write('<tr>');
                    for(let j=0;j<boxes;j++){
                    document.write(' <td id=" '+ i +' , '+ j + ' " ');
                    document.write('</td>'); 
                    }
                    document.write('</tr>');
        
                }
                document.write('</table>');
                b.onClickEvent();
        
            }
    

While this is the function to get the id

i found that by changing the 0 index in line clicked = cell.getElementsByTagName("td")[0].id; I can get to the column I want but don't know how to manipulate it to get the exact cell id

this.onClickEvent=function() {
                let table = document.getElementById("newGame");
                let rows = table.getElementsByTagName("tr");
                for (i = 0; i < rows.length; i++) {
                    let  currentRow = table.rows[i];
                    var createClickHandler =
                      function(cell) {
                        return function() {
                          clicked = cell.getElementsByTagName("td")[0].id;
                          console.log(clicked);
                          let numbers=[];
                          clicked.replace(/(d[d.]*)/g, function( x ) { var n = Number(x); if (x == n) { numbers.push(x); }  })
                          b.spliceGrid(numbers[0],numbers[1]);
                          numbers=[];
                    
                    
                    };
                  };

                  currentRow.onclick = createClickHandler(currentRow);
            }
        
      }

question from:https://stackoverflow.com/questions/65838575/how-do-i-get-the-cell-id-of-a-table

Answer 1

tables elements have properties like rowIndex or cellIndex, you don't need to use id for each cell.

this way:

function newTable(rowCount,cellCount)
  {
  const TableX = document.body.appendChild(document.createElement('table'))
  for( let r=0;r<rowCount;++r)
    {
    let newRow = TableX.insertRow()
    for(c=0;c<cellCount;++c)
      { 
      newRow.insertCell().textContent = `${r},${c}` 
      }
    }

  TableX.onclick = e =>
    {
    if(!e.target.matches('td')) return
    let row = e.target.closest('tr')
    console.clear()
    console.log('clicked on :', row.rowIndex, e.target.cellIndex )
    }
  }


newTable(4,5)

table  {
  border-collapse : collapse;
  }
table td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  text-align : center;
  cursor     : pointer;
  }