반응형
이번 포스팅은 사무실에서 간단한것도 하지 못하고 낑낑거리고 있다가
집에 와서 스택오버플로우에서 도움을 받아 정리해보았다.
(도움 주신 형님 : stackoverflow.com/questions/48927441/get-table-row-value-with-jquery-js/48927825)
1. 우선은 대충 테이블을 그리고
<div id = "tb_div">
<table>
<thead>
<tr>
<th>구분</th>
<th>체크</th>
<th>이름</th>
<th>주소</th>
<th>가입일</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="checkbox" id="chk1" name="chk" ></td>
<td>피카쮸</td>
<td>서울시 도봉구</td>
<td>2021.01.03</td>
</tr>
<tr>
<td>2</td>
<td><input type="checkbox" id="chk2" name="chk"></td>
<td>라이쮸</td>
<td>경기도 부천시</td>
<td>2021.02.01</td>
</tr>
<tr>
<td>3</td>
<td><input type="checkbox" id="chk3" name="chk"></td>
<td>파이리</td>
<td>경상남도 하동</td>
<td>2021.03.13</td>
</tr>
</tbody>
</table>
</div>
2. 그래도 기본 border 값은 필요할 듯 하여..
<style>
table {
width: 100%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
text-align: center;
}
</style>
3. 자바스크립트로도 구현은 가능하겠지만 마음이 급해서 아직은 구현 못해서 나중에 해봐야겠다.
우선은 제이쿼리를 사용해야 하니 제이쿼리도 추가해주었다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
4. 그 다음에 checkbox클릭시 clickEvent(event)가 작동하도록 추가.
$(function() {
/* input 타입 중 checkbox에서 name값을 기준으로 찾음. (name 대신 id도 가능)
* e.g. $('input:checkbox[id="chk"]').click(function () {....} 대충 이런식?
* */
$('input:checkbox[name="chk"]').click(function () {
/* 그 중에서도 체크박스에 check 되었을 경우 */
if($('input:checkbox[name="chk"]').is(':checked')) {
console.log("체크");
clickEvent(event);
/* 또는 */
} else {
console.log("체크 해제");
}
})
});특히 $('input:checkbox[name="chk"]') input 태그 중에 checkbox type인 부분을 의미하는 것 같은데,
정확한 문법을 잘 몰라서 좀 더 공부해서 나중에 꼭 추가해야겠다.
5. clickEvent에서 해당 row값 뽑기
function clickEvent(event) {
// 이벤트를 체크박스에 달았기 때문에 여기에서 타겟은 체크박스를 가리킴.
console.log('target :: ', $(event.target));
// $(event.target)에서 가장 가까운 tr 태그 찾기
var row = $(event.target).closest('tr');
// 그 중에서도 td 태그를 찾는다.
var columns = row.find('td');
// 콘솔에 어떻게 찍히는지 확인!
console.log('row :: ' , row);
console.log('columns :: ' , columns);
//columns.addClass('row-highlight');
var values = "";
// 제이쿼리를 이용한 반복문. idx값과 item을 이용해서 필요한 용도에 맞게 사용하기.
$.each(columns, function (idx, item) {
values = values + 'td' + (idx + 1) + ':' + item.innerHTML + '<br/>';
//alert(values);
});
console.log('최종 :: ' , values);
}콘솔 로그를 찍어서 데이터가 어떻게 넘어오는지 좀 더 명확하게 봐둘 필요가 있다.
6. 로그 확인하기.
앞서 5번에서 찍어둔 로그 부분과 비교해서 보면 좋을 것 같다.
target의 경우에는 event가 발생한 부분을 가리키기에 이벤트를 걸어둔 checkbox를 리턴하고,
row의 경우에는 선택한 checkbox에서 가장 가까운 tr을 리턴하기에 "피카쮸"가 있는 로우를 리턴,
colums는 td태그를 찾아 리턴하기에 첫번째 로우에 있는 cell값들을 가져오게 된다.
7. 전체 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 대충 만든 css -->
<style>
table {
width: 100%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
text-align: center;
}
</style>
<!-- 제이쿼리 선언 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
/* input 타입 중 checkbox에서 name값을 기준으로 찾음. (name 대신 id도 가능)
* e.g. $('input:checkbox[id="chk"]').click(function () {....} 대충 이런식?
* */
$('input:checkbox[name="chk"]').click(function () {
/* 그 중에서도 체크박스에 check 되었을 경우 */
if($('input:checkbox[name="chk"]').is(':checked')) {
console.log("체크");
clickEvent(event);
/* 또는 */
} else {
console.log("체크 해제");
}
})
});
function clickEvent(event) {
// 이벤트를 체크박스에 달았기 때문에 여기에서 타겟은 체크박스를 가리킴.
console.log('target :: ', $(event.target));
// $(event.target)에서 가장 가까운 tr 태그 찾기
var row = $(event.target).closest('tr');
// 그 중에서도 td 태그를 찾는다.
var columns = row.find('td');
// 콘솔에 어떻게 찍히는지 확인!
console.log('row :: ' , row);
console.log('columns :: ' , columns);
//columns.addClass('row-highlight');
var values = "";
// 제이쿼리를 이용한 반복문. idx값과 item을 이용해서 필요한 용도에 맞게 사용하기.
$.each(columns, function (idx, item) {
values = values + 'td' + (idx + 1) + ':' + item.innerHTML + '<br/>';
//alert(values);
});
console.log('최종 :: ' , values);
}
</script>
<div id = "tb_div">
<table>
<thead>
<tr>
<th>구분</th>
<th>체크</th>
<th>이름</th>
<th>주소</th>
<th>가입일</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="checkbox" id="chk1" name="chk" ></td>
<td>피카쮸</td>
<td>서울시 도봉구</td>
<td>2021.01.03</td>
</tr>
<tr>
<td>2</td>
<td><input type="checkbox" id="chk2" name="chk"></td>
<td>라이쮸</td>
<td>경기도 부천시</td>
<td>2021.02.01</td>
</tr>
<tr>
<td>3</td>
<td><input type="checkbox" id="chk3" name="chk"></td>
<td>파이리</td>
<td>경상남도 하동</td>
<td>2021.03.13</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>우선은 까먹지 않으려고 나름 정리해서 올려봤는데 허접한 나의 실력 때문에 정확하지는 않으니..
제대로 안되면 확인해서 다시 해보고 잘 되면 더욱이 한번 더 확인해서 적용하길 바랍니다.
반응형