-
211001_table,button,click,scoreJQuery 2021. 10. 1. 10:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<table>
<tr>
<th width="100">이름</th>
<td>
<input type="text" id="name" style="width:100px;">
</td>
</tr>
<tr>
<th width="100">JAVA</th>
<td>
<input type="text" id="java" style="width:100px;">
</td>
</tr>
<tr>
<th width="100">ORACLE</th>
<td>
<input type="text" id="oracle" style="width:100px;">
</td>
</tr>
<tr>
<th width="100">HTML</th>
<td>
<input type="text" id="html" style="width:100px;">
</td>
</tr>
<tr>
<!-- colespan을 2보다 3으로 하면 표에 여유가 많이 생김 -->
<td colspan="3" align="center">
<button type="button" id="btn">결과출력</button>
</td>
</tr>
<tr>
<td colspan="3">
<div id="result"></div>
</td>
</tr>
</table>
<script type="text/javascript">
$("table").css({
"border":"2px inset gray",
"border-collapse":"collapse"
});
$("th,td").css({
"border":"1px solid gray"
});
$("th").css("background-color","pink");
//버튼이벤트
$("#btn").click(function() {
//각각의 id값 얻어오기
var name=$("#name").val();
var java=$("#java").val();
var oracle=$("#oracle").val();
var html=$("#html").val();
//각각 null값 체크
if(name.length==0){
alert("이름 입력해 주세요");
$("#name").focus(); //name 입력창으로 다시 가는 것..초기값 느낌
return;
}
if(isNaN(java) || java.length==0){
alert("java 숫자만 입력 가능");
$("#java").focus();
return;
}
if(isNaN(oracle) || oracle.length==0){
alert("oracle 숫자만 입력 가능");
$("#oracle").focus();
return;
}
if(isNaN(html) || html.length==0){
alert("html 숫자만 입력 가능");
$("#html").focus();
return;
}
//총점,평균
var sum=parseInt(java)+parseInt(oracle)+parseInt(html);
var avg=sum/3;
//누적
var s="이름: "+name+"<br>";
s+="JAVA점수: "+java+"점 <br>";
s+="ORACLE점수: "+oracle+"점 <br>";
s+="HTML점수: "+html+"점 <br>";
s+="총점: "+sum+"점 <br>";
s+="평균: "+avg+"점 <br>";
//div result에 누적된 s를 html로 출력
$("#result").html(s).css({
"font-size":"15pt",
"font-family":"맑은고딕"
});
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
211001_div,check,radio (0) 2021.10.01 211001_clone,append (0) 2021.10.01 211001_list,select,contains (0) 2021.10.01 211001_div,mouseover,mouseout,empty,hover (0) 2021.10.01 211001_span,rgbColor,random,click (0) 2021.10.01