[HTML] <table>의 row index와 cell index 구하는 법

백오피스 웹페이지 등에서 <table> 태그를 써서 테이블 / 표 UI를 구현하였을 때, 특정 항목의 row가 몇 번째인지 값을 가져와야 할 때가 있다. 그런데 어떻게 가져오면 될까?

테이블에서 방금 클릭한 row가 몇 번째인지 구해보자

<table> tr rowIndex

const clickTableItem = (e) => {
  const rowIndex = e.target.closest("tr").rowIndex;
  ...
}

...
onClick={(e) => clickTableItem(e)}
...

방금 클릭한 항목의 row Index를 구해보았다. 잘 나오는 것을 확인해보자.
테이블에는 row도 있지만, column도 있다. 그렇다면 특정 항목의 column이 몇 번째인지는 어떻게 알 수 있을까?

테이블에서 방금 클릭한 cell은 몇 번째인지 구해보자

<table> td cellIndex

const clickTableItem = (e) => {
  const cellIndex = e.target.closest("td").cellIndex;
  ...
}

...
onClick={(e) => clickTableItem(e)}
...

이렇게 방금 클릭한 항목의 cell Index도 구해보았다. tr의 rowIndex와 td의 cellIndex로 구한다는 점만 알고 있으면 좋을 것 같다.