jQuery의 반복문 each()
여러개의 태그를 select() 함수를 이용해 동시에 속성을 지정한다거나 지우거나 복사하거나 하는 등 한번에 처리를 해야할 때가 있으나,
선택한 태그들을가지고 하나하나 처리를 해야할 때 사용하는 반복문 함수입니다.
이번 실습에서는 성적표를 가지고, 각각의 점수를 합하고 평균을 구하는 구분을 each()문을 이용해서 해보도록 하겠습니다.
한사람씩 그리고 과목하나하나의 점수씩 계산이 필요하므로 이중 each()문을 이용해서 구하는 방법입니다.
* find() : 현재위치의 태그 하위에 있는 태그를 검색할 때 사용하는 함수 입니다.
* length : jQuery를 이용해 선택한 태그들의 갯수를 구할 때 사용하는 속성 입니다.
* Math.round : javascript 기본구문 반올림 처리하기
* parseInt : 숫자형태 만들기
* 첫번째 each() 반복문에서 tr_this 변수에 jQuery(this)로 저장하는 이유는? 이중 each() 구분형태로 하위 each() 문안에서의 this와 충돌을 막기 위해서 입니다
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; margin-top:5px; }
table>tbody>tr>td.point { color:Blue; }
table>tbody>tr>td.total { color:red; }
table>tbody>tr>td.average { color:green; font-weight:bold; }
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- jQuery 스터디 html -->
<div class="box">
<table id="tb_class" border="1">
<thead>
<tr>
<th>이름</th><th class="point">국어</th><th class="point">영어</th><th class="point">수학</th><th>총합</th><th>평균</th>
</tr>
</thead>
<tbody>
<tr>
<td>지훈</td><td class="point">82</td><td class="point">57</td><td class="point">93</td><td class="total"></td><td class="average"></td>
</tr>
<tr>
<td>미나</td><td class="point">55</td><td class="point">79</td><td class="point">54</td><td class="total"></td><td class="average"></td>
</tr>
<tr>
<td>영진</td><td class="point">60</td><td class="point">85</td><td class="point">67</td><td class="total"></td><td class="average"></td>
</tr>
<tr>
<td>주연</td><td class="point">100</td><td class="point">46</td><td class="point">82</td><td class="total"></td><td class="average"></td>
</tr>
<tr>
<td>성준</td><td class="point">91</td><td class="point">29</td><td class="point">55</td><td class="total"></td><td class="average"></td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<button type="button" onclick="btn1();">점수계산</button>
</div>
<script type="text/javascript">
// jQuery 스터디 스크립트
// 첫번째 each()문에서 한명한명의 학생의 목록을 반복해 돌립니다.
// 하위 두번째 each()문에서 현재 선택된 학생의 과목 점수를 반복해서 돌리며 합계를 구하고, 과목수를 체크합니다.(구구단 형식)
function btn1() {
var tr_scount = jQuery("#tb_class>thead>tr>.point").length; // 과목수체크 - 평균계산시 이용 (과목이 추가될 수 있다고 보고 하드코딩이되지 않도록 .point 클래스를 이용해 과목수를 구함.)
jQuery("#tb_class>tbody>tr").each(function(){
var tr_this = jQuery(this); // 현재 학생의 태그지정
var tr_total = 0; // 합계점수
tr_this.find("td.point").each(function(){
tr_total+= parseInt(jQuery(this).text()); // 합계를 위해 10진수 형태의 숫자로 변형
});
tr_this.find(".total").text(tr_total);
tr_this.find(".average").text(Math.round(tr_total / tr_scount)); // 평균 반올림처리
});
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery addClass removeClass (0) | 2017.12.22 |
|---|---|
| jquery attribute selector (0) | 2017.12.18 |
| jquery appendTo() (0) | 2017.12.15 |
| jquery closest() (0) | 2017.12.14 |
| jquery click() (0) | 2017.12.13 |
댓글