HTML Table에서 버튼 클릭해서 다른 컬럼 텍스트값 가져오기

2021-06-21

⏱ 13 min.

프로젝트를 진행하던중 사용자 목록이 정의된 테이블에서 각 로우마다 있는 버튼을 클릭하면 해당 사용자를 삭제할 수 있는 기능을 개발하는 경험을 해보았다.

자바스크립트로 이런것도 가능하구나 싶어서 정리해본다.

예제 코드를 아래처럼 정리해보았다.

HTML 코드

<div class="container">
<h2 style="margin-bottom: 1em">사용자 목록</h2>
<table id="userList" class="table table-hover">
    <tr>
      <th>id</th>
      <th>사용자명</th>
      <th>삭제</th>
    </tr>
    <tr>
      <td class="userId">1</td>
      <td>개발자앤디1</td>
      <td>
        <button class="btn btn-danger pull-right">삭제</button>
      </td>
    </tr>
    <tr>
      <td class="userId">2</td>
      <td>개발자앤디2</td>
      <td>
        <button class="btn btn-danger pull-right">삭제</button>
      </td>
    </tr>
    <tr>
      <td class="userId">3</td>
      <td>개발자앤디3</td>
      <td>
        <button class="btn btn-danger pull-right">삭제</button>
      </td>
    </tr>
    <tr>
      <td class="userId">4</td>
      <td>개발자앤디4</td>
      <td>
        <button class="btn btn-danger pull-right">삭제</button>
      </td>
    </tr>
    <tr>
      <td class="userId">5</td>
      <td>개발자앤디5</td>
      <td>
        <button class="btn btn-danger pull-right">삭제</button>
      </td>
    </tr>
</table>
</div>

CSS 코드

.container table tr th {
  text-align: center; 
  vertical-align: middle; 
  word-break: keep-all;
  padding-right: 3em;
}

.container table tr td {
  text-align: center; 
  vertical-align: middle; 
  word-break: keep-all;
  padding-right: 3em;
}

여기까지 하면 아래의 테이블이 완성된다.

여기서 삭제 버튼을 클릭을 하면, 해당 로우의 id값을 가져올 수 있어야한다. 그래야 해당 id값으로 사용자삭제 API를 호출할 수 있기 때문이다.

이번 포스팅에선 API까지 구현하는것은 아니므로 사용자명을 가져오는것까지 해보려고 한다.

먼저 getUserName() 이라는 스크립트 함수가 작동되도록 HTML 테이블 코드의 Button 태그에 속성을 추가해준다.

1 2	<button class="btn btn-danger pull-right" type="button" onclick="getUserName()">삭제</button>

Button 태그는 디폴트로 submit이 작동되므로 type="button" 옵션을 추가해야만, submit이 작동되지 않는다. 그리고 버튼을 클릭하면 작동시킬 함수를 onclick 속성으로 추가해줬다.

아직은 실행되지 않는다. 이제 스크립트 함수를 작성할 차례이다.

1
2
3

function getUserName() {
   ...
}

먼저 테이블의 DOM을 호출해서 사용할 것이므로 이를 변수로 선언해둔다.

1	let userList = document.getElementById('userList');

이제는 반복문을 작성할 것이다. 사용자목록에서 어떤 사용자를 선택할지는 결국 테이블의 몇번 Row를 선택하는지를 결정하는 것이므로 버튼을 클릭하면, 반복문을 돌려서 테이블의 몇번 Row를 클릭한건지를 가져오기 위함이다.

for (let i = 1; i < userList.rows.length; i++) {
   userList.rows[i].cells[2].onclick = function () {
      let userName = userList.rows[i].cells[1].innerText;
      alert(userName+"을 선택하셨습니다.");
   }
}

사용자이름을 가져오는 코드가 결국 이 포스팅의 핵심(?)이다..ㅎ

1	userList.rows[i].cells[1].innerText;

이렇게하면 사용자 목록에서 버튼이 클릭된 i번째 row의 1번째 cell에 해당하는 텍스트값을 가져온다.

See the Pen qBrwQee by DevAndy (@youngjinmo) on CodePen.

만약 위의 CodePen에서 스크립트가 제대로 작동되지 않는다면, 링크에 접속해서 확인해보도록 하자.

DevJavaScript