[jQuery] 자식 요소 찾기, children() 사용법 / 테이블 행 정보 가져오기

테이블의 행(tr)을 클릭해서 행의 값(td)을 가져오는 소스 코드입니다. 
tr의 class에 'row_a' 값을 넣고 클릭시 this는 사용자가 클릭한 객체를 가지게 됩니다.
tr을 기준으로 자식 요소를 찾을 수 있습니다. td.eq로 선택한 행에 대해서 데이터를
가져올 수 있습니다. [td.eq(1) = email]

간단한 소스 이므로 다른 요소를 찾는 함수랑 응용해서 같이 사용하시면 됩니다!

 

↓↓↓↓↓ script 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
  table {
    width: 100%;
    border: 1px solid #444444;
  }
  th, td {
    border: 1px solid #444444;
  }
</style>
<script>
$(function () {
	$( ".row_a" ).click(function() {
		var checkList = $(this);
		var td = checkList.children();
		var email = td.eq(1).text();
		var name = td.eq(2).text();
		var phone = td.eq(3).text();
		
		var str = "ID는 "+email+" 이름은 "+name+" 연락처는 "+phone+" 입니다.";
		$("#click_result").html(str);
	});
});
</script>

↓↓↓↓↓ html

<table>
<thead>
	<tr>
		<th>번호</th>
		<th>ID</th>
		<th>담당자명</th>
		<th>연락처</th>
	</tr>
</thead>
<tbody>
	<tr class="row_a">
		<td>1</td>
		<td>abc@gmail.com</td>
		<td>홍길동</td>
		<td>010-1234-1234</td>
	</tr>
	<tr class="row_a">
		<td>2</td>
		<td>def@gmail.com</td>
		<td>심봉사</td>
		<td>010-5678-5678</td>
	</tr>
</tbody>
</table>
<div style="margin-top:20px;" id="click_result"></div>

 

 

번호	ID	담당자명	연락처
1	abc@gmail.com	홍길동	010-1234-1234
2	def@gmail.com	심봉사	010-5678-5678