<div id="readability-page-1" class="page"><div>
 <article id="post-js-get-text-from-table" itemscope="" itemprop="blogPost">
 <div>
 
 <header>
 
 
 
 

 </header>
 
 
 
 
 
 <div itemprop="articleBody">
 

 

 

 프로젝트를 진행하던중 사용자 목록이 정의된 테이블에서 각 로우마다 있는 버튼을 클릭하면 해당 사용자를 삭제할 수 있는 기능을 개발하는 경험을 해보았다.
자바스크립트로 이런것도 가능하구나 싶어서 정리해본다.
예제 코드를 아래처럼 정리해보았다.
HTML 코드
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 </pre></td><td><pre>&lt;div class="container"&gt; &lt;h2 style="margin-bottom: 1em"&gt;사용자 목록&lt;/h2&gt; &lt;table id="userList" class="table table-hover"&gt; &lt;tr&gt; &lt;th&gt;id&lt;/th&gt; &lt;th&gt;사용자명&lt;/th&gt; &lt;th&gt;삭제&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="userId"&gt;1&lt;/td&gt; &lt;td&gt;개발자앤디1&lt;/td&gt; &lt;td&gt; &lt;button class="btn btn-danger pull-right"&gt;삭제&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="userId"&gt;2&lt;/td&gt; &lt;td&gt;개발자앤디2&lt;/td&gt; &lt;td&gt; &lt;button class="btn btn-danger pull-right"&gt;삭제&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="userId"&gt;3&lt;/td&gt; &lt;td&gt;개발자앤디3&lt;/td&gt; &lt;td&gt; &lt;button class="btn btn-danger pull-right"&gt;삭제&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="userId"&gt;4&lt;/td&gt; &lt;td&gt;개발자앤디4&lt;/td&gt; &lt;td&gt; &lt;button class="btn btn-danger pull-right"&gt;삭제&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="userId"&gt;5&lt;/td&gt; &lt;td&gt;개발자앤디5&lt;/td&gt; &lt;td&gt; &lt;button class="btn btn-danger pull-right"&gt;삭제&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; </pre></td></tr></tbody></table></figure>

CSS 코드
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 </pre></td><td><pre>.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; } </pre></td></tr></tbody></table></figure>

여기까지 하면 아래의 테이블이 완성된다.
<img src="https://user-images.githubusercontent.com/33862991/122713864-51455d00-d2a1-11eb-915d-21f72523048f.png">
여기서 삭제 버튼을 클릭을 하면, 해당 로우의 id값을 가져올 수 있어야한다. 그래야 해당 id값으로 사용자삭제 API를 호출할 수 있기 때문이다.
이번 포스팅에선 API까지 구현하는것은 아니므로 <code>사용자명</code>을 가져오는것까지 해보려고 한다.
먼저 <code>getUserName()</code> 이라는 스크립트 함수가 작동되도록 HTML 테이블 코드의 Button 태그에 속성을 추가해준다.
<figure><table><tbody><tr><td><pre>1 2 </pre></td><td><pre>&lt;button class="btn btn-danger pull-right" type="button" onclick="getUserName()"&gt;삭제&lt;/button&gt; </pre></td></tr></tbody></table></figure>

Button 태그는 디폴트로 <code>submit</code>이 작동되므로 <code>type="button"</code> 옵션을 추가해야만, <code>submit</code>이 작동되지 않는다. 그리고 버튼을 클릭하면 작동시킬 함수를 <code>onclick</code> 속성으로 추가해줬다.
<img src="https://user-images.githubusercontent.com/33862991/122716216-f0b81f00-d2a4-11eb-9d60-14fb474d9fee.png">
아직은 실행되지 않는다. 이제 스크립트 함수를 작성할 차례이다.
<figure><table><tbody><tr><td><pre>1 2 3 </pre></td><td><pre>function getUserName() { ... } </pre></td></tr></tbody></table></figure>

먼저 테이블의 DOM을 호출해서 사용할 것이므로 이를 변수로 선언해둔다.
<figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>let userList = document.getElementById('userList'); </pre></td></tr></tbody></table></figure>

 이제는 반복문을 작성할 것이다. 사용자목록에서 어떤 사용자를 선택할지는 결국 테이블의 몇번 Row를 선택하는지를 결정하는 것이므로 버튼을 클릭하면, 반복문을 돌려서 테이블의 몇번 Row를 클릭한건지를 가져오기 위함이다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 </pre></td><td><pre>for (let i = 1; i &lt; userList.rows.length; i++) { userList.rows[i].cells[2].onclick = function () { let userName = userList.rows[i].cells[1].innerText; alert(userName+"을 선택하셨습니다."); } } </pre></td></tr></tbody></table></figure>

사용자이름을 가져오는 코드가 결국 이 포스팅의 핵심(?)이다..ㅎ
<figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>userList.rows[i].cells[1].innerText; </pre></td></tr></tbody></table></figure>

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

만약 위의 CodePen에서 스크립트가 제대로 작동되지 않는다면, <a href="https://codepen.io/youngjinmo/pen/qBrwQee" target="_blank">링크</a>에 접속해서 확인해보도록 하자.



 </div>
 </div>
	
	
 

</article>
 </div></div>

기록하는개발자 | DevAndy

DevAndy

프로젝트를 진행하던중 사용자 목록이 정의된 테이블에서 각 로우마다 있는 버튼을 클릭하면 해당 사용자를 삭제할 수 있는 기능을 개발하는 경험을 해보았다.
자바스크립트로 이런것도 가능하구나 싶어서 정리해본다.
예제 코드를 아래처럼 정리해보았다.
HTML 코드

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

댓글