학생의 성적을 가지고, 총점과 평균을 구해서 테이블로 보여주는 코드 구현
자바스크립트와 제이쿼리를 사용하여 동일한 예제를 구현 하는 두개의 차이점을 명확하게 알 수 있다.
제이쿼리의 경우 자바스크립트의 비해 조금 더 쉽게, 짧은 코드로 구현이 가능하게 해준다.
아래와 같은 배열을 활용하여 테이블을 만드는 예제
var arr = [];
arr.push({name:"박자바",kor:100,eng:100,math:95});
arr.push({name:"김파이",kor:80,eng:75,math:100});
arr.push({name:"홍코드",kor:95,eng:90,math:87});
자바스크립트 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var arr = [];
arr.push({name:"박자바",kor:100,eng:100,math:95});
arr.push({name:"김파이",kor:80,eng:75,math:100});
arr.push({name:"홍코드",kor:95,eng:90,math:87});
for(var i in arr)
{
arr[i].getSum = function() {
return this.kor+this.eng+this.math;
}
arr[i].getAvg = function() {
return this.getSum()/arr.length;
}
}
function writeA() {
var tb = document.getElementById("tb");
for(i in arr)
{
var tr = document.createElement("tr");
var tdName = document.createElement("td");
var tdSum = document.createElement("td");
var tdAvg = document.createElement("td");
var name = arr[i].name;
var sum = arr[i].getSum();
var avg = arr[i].getAvg();
var txtName = document.createTextNode(name);
var txtSum = document.createTextNode(sum);
var txtAvg = document.createTextNode(avg);
tdName.appendChild(txtName);
tdSum.appendChild(txtSum);
tdAvg.appendChild(txtAvg);
tr.appendChild(tdName);
tr.appendChild(tdSum);
tr.appendChild(tdAvg);
tb.appendChild(tr);
}
}
</script>
</head>
<body>
<button onclick="writeA()">출력</button>
<table border="1" width="80%" id="tb">
<tr>
<td>이름 </td>
<td>총점</td>
<td>평균</td>
</tr>
</table>
</body>
</html>
제이쿼리 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arr = [];
arr.push({name:"박자바",kor:100,eng:100,math:95});
arr.push({name:"김파이",kor:80,eng:75,math:100});
arr.push({name:"홍코드",kor:95,eng:90,math:87});
for(var i in arr)
{
arr[i].getSum = function() {
return this.kor+this.eng+this.math;
}
arr[i].getAvg = function() {
return this.getSum()/arr.length;
}
}
$(function() {
$("#btn").click(function() {
$.each(arr, function(i,student) {
var tr = $("<tr></tr>");
var tdName = $("<td></td>").html(student.name);
var tdSum = $("<td></td>").html(student.getSum());
var tdAvg = $("<td></td>").html(student.getAvg());
tr.append(tdName, tdSum, tdAvg);
$("#tb").append(tr);
});
});
});
</script>
</head>
<body>
<button id="btn">출력</button>
<table border="1" width="80%" id="tb">
<tr>
<td>이름 </td>
<td>총점</td>
<td>평균</td>
</tr>
</table>
</body>
</html>
반응형
'Java Script > jQuery' 카테고리의 다른 글
| jQuery 예제, To Do List & 학생 점수 입력 테이블 (0) | 2019.05.14 |
|---|---|
| jQuery 예제, 버튼 이벤트로 정보 숨기고 보이기(토글) (0) | 2019.05.14 |
| jQuery 예제, 체크박스 모두 선택 (0) | 2019.05.14 |
| 제이쿼리로 이미지 슬라이더 구현 (0) | 2019.05.14 |
| jQuery 애니메이션 큐 (이벤트 누적 제어) (0) | 2019.05.14 |
댓글