<HTML>
<HEAD>
</HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script
src="https://code.jquery.com/jquery-3.6.3.slim.min.js"
integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo="
crossorigin="anonymous"></script>
<!-- 제공된 json을 파일생성해서 저장-->
<!--<SCRIPT SRC="data.js"></script> -->
<!-- 아래 SRC에 해당하는 파일 생성해서 구현할 것.-->
<SCRIPT SRC="test2.js"></script>
<style>
.h_div { border-collapse: collapse;
border-spacing: 0px;
vertical-align: middle;
clear: both;
}
.h_div tr { height: 28px;
margin: 0px;
padding: 0px;
}
.h_div td { font-size: 12px;
margin: 0px;
padding: 0px;
text-align: initial;
border: 1px solid #0033CC;
border-collapse : collapse;
border-spacing: 0px;
}
.d_check { width: 20px; text-align: center !important;
}
.d_name { width: 50px;
}
.d_tel { width: 80px;
}
.d_email { width: 100px;
}
.d_addr { width: 200px;
}
#buttons { height: 40px;}
#buttons span {
display: block;
float: left;
width: 50px;
margin-right: 20px;
padding: 5px;
border: 1px solid #006600;
border-radius: 10px;
font-size: 12px;
text-align: center !important;
}
</style>
<script>
$( document ).ready(function() {
$('#buttons').children().each(function(){
$(this).on("mouseover",function(){
btn_color_in($(this));
});
$(this).on("mouseout",function(){
btn_color_out($(this));
});
});
});
function btn_color_in( obj ){
obj.css('background-color','#DBF8AF');
obj.css('cursor','pointer');
}
function btn_color_out( obj ){
obj.css('background-color','');
obj.css('cursor','default');
}
</script>
<HEAD>
</HEAD>
<BODY>
<DIV id="buttons"><span id="btn_add">ADD</span><span id="btn_del">DEL</span><span id="btn_show">SHOW</span></div>
<DIV>
<table class="h_div">
<tr><td class="d_check">ㅁ</td><td class="d_name">이름</td><td class="d_tel">전화번호</td><td class="d_email">이메일</tr>
</table>
</DIV>
</BODY>
</HTML>
문제:
1. ADD를 누르면 TABLE-TR 라인생성
2. DEL을 누르면 선택된 라인삭제, 선택된 라인이 없으면 에러출력
3. 전화번호를 입력하면 패턴체크 ( 0의 자리의 자릿수는 무제한 )
000-0000-0000
또는 +00-00-0000-0000 (국가번호 표시)
4. 이메일을 입력하면 패턴체크
5. SHOW를 누르면 이메일의 도메인 별로 몇명인지 출력, 선택된 라인이 없으면 에러출력
ex> kidoel@naver.com
kidoel2@naver.com
kidoel@gmail.com
'NAVER 2명, GMAIL 1명' 출력.