아래 예제는 생활코딩에서 설명하는 강좌 내용을 적는다.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </head> <body> <ul> <li class="marked">html</li> <li>css</li> <li id="active">JavaScript <ul> <li>JavaScript Core</li> <li class="marked">DOM</li> <li class="marked">BOM</li> </ul> </li> </ul> <script> //$( ".marked", "#active").css( "background-color", "red" ); //$("#active .marked").css( "background-color", "red" ); $("#active").find('.marked').css('background-color','blue'); </script> </body> </html> |
$(".marked", "#active").css( "background-color", "red" );
$("#active .marked").css( "background-color", "red" );
$("#active").find('.marked').css('background-color','red');
는 모두 동일한 결과를 출력한다.
find는 jQuery 객체 내에서 어떤 요소(기준요소)의 하위 요소 중 특정 요소를 찾을 때 사용한다.
CSS 테이블에 대한 사항은 http://link2me.tistory.com/1463 를 참조하라.
테이블을 jQuery 로 다루는 걸 적어둔다.
children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나,
find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올 수 있다.
$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수다.
첫번째 매개변수로 배열이나 객체를 받는다.
두번째 매개변수로 콜백함수를 받으며, 콜백함수의 인자로는 인덱스와 값을 인자로 갖는다.
$.each(arr, function (index, item) {
});
$('.list li').each(function (index, item) {
});
$("table tbody tr").click(function(){
var tr = $(this); // 현재 클릭된 row
var td = tr.children();
// 반복문을 사용해서 배열에 값을 담아보기
var tdArray = new Array(); // 배열선언
td.each(function(i){
tdArray.push(td.eq(i).text());
});
console.log("배열에 담은 값 : " + tdArray);
// 특정 셀 값 알아내기
var customerId = $(this).find("td").eq(2).html();
});
$("table tbody tr td").click(function(){
var td = $(this); // 현재 클릭된 셀
var val = td.text(); // 현재 선택된 셀의 값
var id=$(this).attr("id"); // 셀에 지정된 속성값
});
<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(function(){
// tr 태그에 마우스를 올릴때
$('table tbody tr').mouseover(function() {
$(this).children().css({
'backgroundColor' : '#DCDCDC',
'cursor' : 'pointer'
});
}).mouseout(function() {
$(this).children().css({
'backgroundColor' : '#FFFFFF',
'cursor' : 'default'
});
});
// 전체 선택, 전체 해제
$("#checkall").change(function() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$('#select_chkbox').click(function(i) {
var rowData = new Array();
var chkData = new Array();
var checkbox = $('input:checkbox[name="uid[]"]:checked');
checkbox.each(function(i){ // 반복되는 태그 단위를 찾아서 each() 함수 사용
var select_value = $(this).val();
chkData.push(select_value);
// checkbox.parent() : checkbox의 부모는 <td>
// checkbox.parent().parent() : <td>의 부모이므로 <tr>
var tr = checkbox.parent().parent().eq(i);
var td = tr.children();
rowData.push(tr.text()+"<br />");
});
if (rowData.length == 0) {
$("#chk_result").html("선택항 항목이 없습니다").css("color", "blue"); $("#rawData_result").html("");
} else {
$("#chk_result").html("선택된 체크박스 값 : "+chkData).css("color", "blue");
$("#rawData_result").html("체크된 Row의 모든 데이터 : <br /> "+rowData);
}
});
var sum = 0;
$('table tbody tr').each(function(){ //테이블 모든 tr에 순차 접근
if($.isNumeric($("td:eq(4)",this).text())){ //해당 tr의 다섯번째 td에 접근해서 숫자인지 확인
sum += parseInt($("td:eq(4)",this).text());//해당하는 값을 숫자로 변환해서 누적합산 처리
}
});
$("#sum").text("수량 합계 : "+sum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));// sum을 출력
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th class="header" width="30"><input type="checkbox" id="checkall" /></th>
<th class="header" width="100">No</th>
<th class="header" width="250">품목</th>
<th class="header" width="250">가격</th>
<th class="header" width="200">수량</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chkbox" name="uid[]" value="7" /></td>
<td>7</td>
<td>사과</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbox" name="uid[]" value="6" /></td>
<td>6</td>
<td>수박</td>
<td>4</td>
<td>500</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbox" name="uid[]" value="5" /></td>
<td>5</td>
<td>사과</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbox" name="uid[]" value="4" /></td>
<td>4</td>
<td>수박</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chkbox" name="uid[]" value="3" />
</td>
<td>3</td>
<td>복숭아</td>
<td>7</td>
<td>50</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chkbox" name="uid[]" value="2" />
</td>
<td>2</td>
<td>사과</td>
<td>8</td>
<td>90</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chkbox" name="uid[]" value="1" />
</td>
<td>1</td>
<td>망고</td>
<td>555</td>
<td>40</td>
</tr>
</tbody>
<td colspan="5" style="text-align:left;">
<button type="button" class="btn btn-success btn-sm" id="select_chkbox">선택</button>
</table>
</div>
<div id="chk_result"></div>
<div id="rawData_result"></div>
<div id="sum"></div>
</div>
</body>
</html> |
