| 순번 |
이름 |
국어 |
영어 |
수학 |
총점 |
| 1 |
홍길동 |
90 |
80 |
90 |
|
| 2 |
일지매 |
95 |
70 |
95 |
|
| 3 |
성춘향 |
80 |
70 |
90 |
|
| 4 |
이몽룡 |
90 |
85 |
70 |
|
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 기본 CSS 설정
$("table").css("width","600px").css("height", "300px").css("font-size", "20px").css("text-align", "center");
$("#title").css("background","#000080").css("color","white");
// 계산하지 않는 속성(순번, 이름, 총점)의 개수를 지정한다.
const NOT_CALCULATE_ATTRIBUTE = 3;
// Title을 제외한 tr만 검색한다.
$("table tr:gt(0)").each(function(){
var sum = 0;
$(this).find("td:gt(1):lt("+($(this).find("td").length-NOT_CALCULATE_ATTRIBUTE)+")").each(function(){
sum += $(this).html()*1;
console.log($(this).html());
});
$(this).find("td:last").text(sum);
});
// 타이틀을 제외한 tr에 색을 지정해준다.
$("tr:gt(0)").each(function(){
if($(this).children(0).html()%2 == 1){
$(this).css("background","HOTPINK").attr("col1", "HOTPINK").attr("col2","yellow").attr("cor", 0);
}else{
$(this).css("background","#cc0033").attr("col1", "#cc0033").attr("col2","yellow").attr("cor", 0);
}
// attr로 각 색을 먼저 저장해 둔 후
// hover 이벤트가 발생하면 저장해 둔 색으로 변경한다.
// mouseout 이벤트가 발생하면 원래 색으로 돌려보낸다.
if(!($(this).attr("id") == "title")){
$(this).hover(function(){
$(this).css("background", $(this).attr("col2"));
});
$(this).mouseout(function(){
$(this).css("background", $(this).attr("col1"));
})
}
});
});
</script>
</head>
<body>
<table border="1">
<tr id="title">
<td>순번</td><td>이름</td>
<td>국어</td><td>영어</td><td>수학</td><td>총점</td>
</tr>
<tr>
<td>1</td><td>홍길동</td><td>90</td><td>80</td><td>90</td><td> </td>
</tr>
<tr>
<td>2</td><td>일지매</td><td>95</td><td>70</td><td>95</td><td> </td>
</tr>
<tr>
<td>3</td><td>성춘향</td><td>80</td><td>70</td><td>90</td><td> </td>
</tr>
<tr>
<td>4</td><td>이몽룡</td><td>90</td><td>85</td><td>70</td><td> </td>
</tr>
</table>
</body>
</html>
댓글