728x90
jQuery 로 달력을 만드는 과정
<!-- HTML -->
<BODY class='WorkArea' id="tManagerBody" name="tManagerBody" >
<div class="btn_flip_left"><a href="javascript:toggleLFrame();"> </a></div>
<div class="btn_flip_right"><a href="javascript:toggleRFrame();"> </a></div>
<div class="title_area">
<h1 class="title" id="title_txt_left" name="title_txt_left">관리자 근무일정 신청</h1>
</div>
<!-- fluid_container -->
<div id="fluid_container" name="fluid_container" class="container_box container_list_box" style="">
<div class="title_area" id="top_date_area" name="top_date_area">
<h2 id="moveday_nav_date" name="moveday_nav_date" class="title calendar_view_cal"></h2>
<div class="btn_box_date">
<div class="btn_area_xs calendar_view_cal">
<span class="date_prev"><a title="이전" id="moveday_nav_pre" name="moveday_nav_pre" class="pointer"></a></span>
<span class="date_next"><a title="이후" id="moveday_nav_next" name="moveday_nav_next" class="pointer"></a></span>
</div>
</div>
</div>
<div class="srch_area">
<fieldset class="search">
<div class="btn_cal_srch"> <a><img alt="일정검색" src="/img/btn_top_cal_srch.gif">일정검색</a> </div>
</fieldset>
</div>
<div id="moveday_nav" name="moveday_nav" class="btn_area calendar_btn_area">
<div class="layout_rgt">
<p class="btn_add"><a href="javascript:view_add_schedule('<%=uai.szKey%>');" title="등록">등록</a></p>
<p class="btn_prnt slt"><a href="#" onclick="javascript:printBasicSetting();" title="인쇄">인쇄</a></p>
<p class="slt_prnt"><a href="javascript:togglePrintType();" title="인쇄">인쇄</a></p>
<div class="layout_rgt layer_pop" id="print_layout" style="top:92px;">
<ul>
<li><a href="javascript:printList();">리스트 인쇄</a></li>
<li><a href="javascript:printTable();">테이블 인쇄</a></li>
</ul>
</div>
</div>
</div>
<!-- calendar_list_box -->
<div class="calendar_list_box" id="boxId" name="boxId">
<div class="month_table" id="eventpaneId" name="eventpaneId">
<table>
<colgroup>
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
</colgroup>
<thead>
<tr>
<th scope="col" class="sunday">일</th>
<th scope="col">월</th>
<th scope="col">화</th>
<th scope="col">수</th>
<th scope="col">목</th>
<th scope="col">금</th>
<th scope="col" class="saturday">토</th>
</tr>
</thead>
</table>
<table id="monthTable" name="monthTable">
<colgroup>
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
<col style="width:14.28571428571429%">
</colgroup>
<tbody id="monthTbody">
</tbody>
</table>
</div>
</div>
<!-- //calendar_list_box -->
</div>
<!-- //fluid_container -->
</BODY><!-- JS -->
<script language="javascript">
$(document).ready(function(){
calendarInit();
});
function calendarInit() {
// 날짜 정보 가져오기
var date = new Date(); // 현재 날짜(로컬 기준) 가져오기
var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); // uct 표준시 도출
var kstGap = 9 * 60 * 60 * 1000; // 한국 kst 기준시간 더하기
var today = new Date(utc + kstGap); // 한국 시간으로 date 객체 만들기(오늘)
var thisMonth = new Date(today.getFullYear(), today.getMonth(), today.getDate());
// 달력에서 표기하는 날짜 객체
var currentYear = thisMonth.getFullYear(); // 달력에서 표기하는 연
var currentMonth = thisMonth.getMonth(); // 달력에서 표기하는 월
var currentDate = thisMonth.getDate(); // 달력에서 표기하는 일
// kst 기준 현재시간
// console.log(thisMonth);
// 캘린더 렌더링
renderCalender(thisMonth);
function renderCalender(thisMonth) {
// 렌더링을 위한 데이터 정리
currentYear = thisMonth.getFullYear();
currentMonth = thisMonth.getMonth();
currentDate = thisMonth.getDate();
// 이전 달의 마지막 날 날짜와 요일 구하기
var startDay = new Date(currentYear, currentMonth, 0);
var prevDate = startDay.getDate();
var prevDay = startDay.getDay();
// 이번 달의 마지막날 날짜와 요일 구하기
var endDay = new Date(currentYear, currentMonth + 1, 0);
var nextDate = endDay.getDate();
var nextDay = endDay.getDay();
//console.log(prevDate, prevDay, nextDate, nextDay);
// 현재 월 표기
$(".title.calendar_view_cal").text(currentYear + '년 ' + (currentMonth + 1) + '월');
calendar = document.querySelector('#monthTbody');
calendar.innerHTML = '';
var cnt_cell =0;
// 지난달
if(prevDay != 6){
var $tr_prev_month = $("<tr>");
for (var i = prevDate - prevDay ; i <= prevDate; i++) {
var $td = $("<td class='day_hidden'>");
var $div = $("<div class='month_cell'>");
var $span_month_cell_date = "<span class='month_cell_date'>"+i+"</span>";
$( $div ).append( $span_month_cell_date );
$( $td ).append( $div );
$( $tr_prev_month ).append( $td );
}
$("#monthTbody").append( $tr_prev_month );
// 지난달을 표기하는 경우의 이번달의 첫번째 주
for(var i = 1; i <=(6-prevDay); i++){
var $td = $("<td class='day_show'>");
var $div = $("<div class='month_cell' id='month_cell_"+i+"'>");
var $span_month_cell_date = "<span class='month_cell_date'>"+i+"</span>";
$( $div ).append( $span_month_cell_date );
$( $td ).append( $div );
$("#monthTbody tr:first-child").append( $td );
}
}
// 이번달
var $tr_this_month_1 = $("<tr>");
var $tr_this_month_2 = $("<tr>");
var $tr_this_month_3 = $("<tr>");
var $tr_this_month_4 = $("<tr>");
var $tr_this_month_5 = $("<tr>");
for(var k=1; k<=5; k++){
for (var i = ( 6-prevDay > 0 ? (k-1)*7 +1 + (6-prevDay) : (k-1)*7 +1 ); i <= ( 6-prevDay > 0 ? (k*7+ (6-prevDay) < nextDate ? k*7 + (6-prevDay) : nextDate) : (k*7 < nextDate ? k*7 : nextDate) ); i++) {
//point 1.
var $td = $("<td class='day_show'>");
var $div = $("<div class='month_cell' id='month_cell_"+i+"'>");
var $span_month_cell_date = "<span class='month_cell_date'>"+i+"</span>";
$( $div ).append( $span_month_cell_date );
$( $td ).append( $div );
$( eval("$tr_this_month_"+k) ).append( $td );
cnt_cell += 1;
}
$("#monthTbody").append( eval("$tr_this_month_"+k) );
}
if(cnt_cell <= 28){
$("#monthTbody tr").last().remove();
}
// 다음달
for (var i = 1; i <= (7 - nextDay-1 == 7 ? 0 : 7 - nextDay-1); i++) {
var $td = $("<td class='day_hidden'>");
var $div = $("<div class='month_cell'>");
var $span_month_cell_date = "<span class='month_cell_date'>"+i+"</span>";
$( $div ).append( $span_month_cell_date );
$( $td ).append( $div );
$("#monthTbody tr:last-child").append( $td );
}
}
// 이전달로 이동
$('.date_prev').on('click', function() {
thisMonth = new Date(currentYear, currentMonth - 1, 1);
renderCalender(thisMonth);
});
// 다음달로 이동
$('.date_next').on('click', function() {
thisMonth = new Date(currentYear, currentMonth + 1, 1);
renderCalender(thisMonth);
});
}
function view_add_schedule(id){
var win_add_schedule = window.open("trip_view_add_schedule.jsp?id="+id,"win_add_schedule","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,top=300,width=1000,height=600");
win_add_schedule.focus();
}
</script>
위의 point1. 의 설명.
for(var k=1; k<=5; k++){ //chk_point 1.
for (var i = ( 6-prevDay > 0 ? (k-1)*7 +1 + (6-prevDay) : (k-1)*7 +1 ); i <= ( 6-prevDay > 0 ? (k*7+ (6-prevDay) < nextDate ? k*7 + (6-prevDay) : nextDate) : (k*7 < nextDate ? k*7 : nextDate) ); i++) {
//chk_point 2.
var $td = $("<td class='day_show'>");
var $div = $("<div class='month_cell' id='month_cell_"+i+"'>");
var $span_month_cell_date = "<span class='month_cell_date'>"+i+"</span>";
$( $div ).append( $span_month_cell_date );
$( $td ).append( $div );
$( eval("$tr_this_month_"+k) ).append( $td );
cnt_cell += 1;
}
$("#monthTbody").append( eval("$tr_this_month_"+k) );
}이 부분을 만들 때 가장 중요하게 생각했던 부분은.
1. 화면에 보이는 달의 1일이 무슨요일부터 시작되는 지.
2. 화면에 보이는 달의 마지막 날이 몇일 인지. 몇요일인지.
3. 화면에 보이는 달의 공백들을 이전달과 다음달로 채우는 부분.
설명을 해보자면,
chk_point 1.
- 한달은 4주로, 많아지면 5주까지도 되기 때문에, k 라는 변수를 설정하여, "주"를 나누었다.
chk_point 2.
그래서 for 문을 돌릴 때 i 의 시작점을 두가지로 나눠서 생각했다.
- 한달의 1일, 즉, 첫번째 주 인 경우 : 한달의 1일이 시작되는 지점을 (6-preDay) 를 더하여, 시작점을 만들었다.
- 2번째 주 이상인 경우 : 첫번째 주가 넘어갔기 때문에, 2번째 주 이상부터는 무조건 일요일 부터 시작하게 했다.
이를 바탕으로 i 의 종료지점을 생각할 때도 두 부분으로 나눠서 생각했다.
- 이번달의 마지막 주가 아닌 경우 : 그 다음 주로 넘어갈 수 있게 i의 종료지점은 (7 * 몇번째 주) 이다.
- 이번달의 마지막 주인 경우 : 이번달의 마지막 날이 몇 일 인지를 먼저 생각하고, 종료지점을 정해야한다.
만약, 이번달의 마지막 날이 30일 이라고 했을 때, i 의 값이 30이하일 경우에만 for 문을 돌리게 하고,
i가 마지막 날이 되면 for 문을 끝냈다.
간단할 것이라 생각했지만, 생각보다 많은 부분(첫번째주 인지, 마지막 날이 몇일 인지, 무슨 요일인지 등등)을 고려해야했기 때문에, 개발을 하는 과정에서 생각을 많이 할 수 있었다.
그래서 더 설명하고 싶은 포인트로 생각했다.
결과 캡쳐
이번달이 몇요일부터 시작하는 지를 보고, 자동으로 빈 공간은 이전달의 마지막 날짜들이 들어갈 수 있게 했다.
또한, 이번달이 끝나는 날짜에 맞춰 자동으로 빈 공간은 다음달의 날짜들이 들어갈 수 있게 한 결과이다.
팝업창 내용
상단의 + 버튼을 누르게 되면
근무일정을 등록할 수 있는 팝업이 뜰 수 있게 했다.
팝업페이지 안에 있는 추가 버튼을 누르면
팝업 코드
<!-- 팝업 페이지 소스코드 -->
<!-- 본문 상단의 view_add_schedule() 함수를 실행할 때 팝업창을 띄우는 과정에서
띄워지는 trip_view_add_schedule.jsp -->
<%@ page contentType="text/html;charset=euc-kr" %>
<%@ include file ="./include/trip_session.jsp"%>
<%@ include file ="./include/trip_util.jsp"%>
<%
Calendar calendar = Calendar.getInstance();
String Sday = String.valueOf(calendar.get(Calendar.DATE));
String Smon = String.valueOf(calendar.get(Calendar.MONTH));
String default_yyyy = calendar.get(Calendar.YEAR) + "";
if ( Smon.length() == 1 ) Smon = "0" + Smon;
if ( Sday.length() == 1 ) Sday = "0" + Sday;
String default_mm = Integer.parseInt(Smon)+1 + "";
if ( default_mm.length() == 1 ) {
default_mm = "0" + default_mm;
}
String default_dd = Sday + "";
%>
<script language="javascript">
function form_submit(){
$("table.content_table tbody").removeClass("ani_background_color");
$("table.content_table tbody").find(".wrong_div").remove();
if(cnt_add == 0){
if((document.form.s_date.value.replace('.','').replace('.','') + "" + document.form.s_hour.value + "" + document.form.s_minute.value) >= (document.form.e_date.value.replace('.','').replace('.','') + "" + document.form.e_hour.value + "" + document.form.e_minute.value)) {
alert('시작일(시작시간)과 종료일(종료시간)이 올바르지 않습니다.');
$("table.content_table tbody").addClass("ani_background_color");
$("table.content_table tbody").find(".inp_ctt").eq(0).append("<div class='wrong_div'>시작일(시작시간)과 종료일(종료시간)이 올바르지 않습니다.</div>");
return false;
}
}else{
for(let i=0; i<=cnt_add; i++){
if((document.form.s_date[i].value.replace('.','').replace('.','') + "" + document.form.s_hour[i].value + "" + document.form.s_minute[i].value) >= (document.form.e_date[i].value.replace('.','').replace('.','') + "" + document.form.e_hour[i].value + "" + document.form.e_minute[i].value) || document.form.s_date[i].value == '' || document.form.e_date[i].value == '') {
alert('시작일(시작시간)과 종료일(종료시간)이 올바르지 않습니다.');
$("table.content_table tbody").eq(i).addClass("ani_background_color");
$("table.content_table tbody").eq(i).find(".inp_ctt").eq(0).append("<div class='wrong_div'>시작일(시작시간)과 종료일(종료시간)이 올바르지 않습니다.</div>");
return false;
}
}
}
document.form.cnt_add.value = cnt_add;
return true;
}
var cnt_add=0;
function reSetTime() {
var obj = document.forms[0];
if(cnt_add == 0 ){
obj.s_date.value = '<%=default_yyyy%>' + '.' + '<%=default_mm%>' + '.' + '<%=default_dd%>';
obj.e_date.value = '<%=default_yyyy%>' + '.' + '<%=default_mm%>' + '.' + '<%=default_dd%>';
form.s_hour.options[9].selected = true;
form.s_minute.options[0].selected = true;
form.e_hour.options[18].selected = true;
form.e_minute.options[0].selected = true;
}else{
obj.s_date[eval(cnt_add)].value = '<%=default_yyyy%>' + '.' + '<%=default_mm%>' + '.' + '<%=default_dd%>';
obj.e_date[eval(cnt_add)].value = '<%=default_yyyy%>' + '.' + '<%=default_mm%>' + '.' + '<%=default_dd%>';
form.s_hour[eval(cnt_add)].options[9].selected = true;
form.s_minute[eval(cnt_add)].options[0].selected = true;
form.e_hour[eval(cnt_add)].options[18].selected = true;
form.e_minute[eval(cnt_add)].options[0].selected = true;
}
}
function add_cont(){
var $tbody = $("<tbody style='border-bottom:1px solid #ccc'>");
// 기간 tr
var $tr_date = $("<tr>");
var $btn_del = "<th rowspan='3' class='del_th'><span class='btn_del'><img src='/img/contact/close.png'></span></th>";
var $th_date = "<th>기 간</th>";
var $td_date = $('<td class="inp_ctt">');
var $datepic_box_s_date = $('<div class="datepic_box">');
var $datepic_box_s_date_input = $('<input type="text" name="s_date" class="basic_inp" style="width:100px;" id="s_date_'+cnt_add+'" value="" size="10" onfocus="this.blur();">');
var $datepic_box_s_date_input_a = $('<a href= "javascript:calenda(\'s_date_'+cnt_add+'\');"><img src="/img/btn_datepicker.gif" class="btn_date"></a>');
var $datepic_box_e_date = $('<div class="datepic_box">');
var $datepic_box_e_date_input = $('<input type="text" name="e_date" class="basic_inp" style="width:100px;" id="e_date_'+cnt_add+'" value="" size="10" onfocus="this.blur();">');
var $datepic_box_e_date_input_a = $('<a href= "javascript:calenda(\'e_date_'+cnt_add+'\');"><img src="/img/btn_datepicker.gif" class="btn_date"></a>');
$( $tr_date ).append( $btn_del );
$( $tr_date ).append( $th_date ); //th:기간
$( $datepic_box_s_date ).append( $datepic_box_s_date_input );
$( $datepic_box_s_date ).append( $datepic_box_s_date_input_a );
$( $td_date ).append( $datepic_box_s_date );
$( $datepic_box_e_date ).append( $datepic_box_e_date_input );
$( $datepic_box_e_date ).append( $datepic_box_e_date_input_a );
$( $td_date ).append( $datepic_box_e_date );
$( $td_date ).append( " 일 부터 " );
$( $td_date ).append( $datepic_box_e_date );
$( $td_date ).append( " 일 까지 " );
$( $tr_date ).append( $td_date );
$( $tbody ).append( $tr_date );
// 출근/퇴근 tr
var $on_off_tr = $("<tr>");
var $on_off_th = "<th>출 근 / 퇴 근</th>";
var $on_off_td = $('<td class="inp_ctt">');
var $on_off_select_s_hour = $('<select name="s_hour" style="height: 25px;" onchange="calculate_day_time()">');
var $on_off_select_s_minute = $('<select name="s_minute" style="height: 25px;" onchange="calculate_day_time()">');
var $on_off_select_e_hour = $('<select name="e_hour" style="height: 25px;" onchange="calculate_day_time()">');
var $on_off_select_e_minute = $('<select name="e_minute" style="height: 25px;" onchange="calculate_day_time()">');
var $on_off_s_hour_option;
var $on_off_e_hour_option;
for (let tt=0; tt<=23; tt++) {
if(tt < 10) {
$on_off_s_hour_option = $("<option value=0"+tt+">0"+tt+"</option>");
$on_off_e_hour_option = $("<option value=0"+tt+">0"+tt+"</option>");
}else{
$on_off_s_hour_option = $("<option value="+tt+">"+tt+"</option>");
$on_off_e_hour_option = $("<option value="+tt+">"+tt+"</option>");
}
$( $on_off_select_s_hour ).append( $on_off_s_hour_option );
$( $on_off_select_e_hour ).append( $on_off_e_hour_option );
}
var $on_off_s_minute_option;
var $on_off_e_minute_option;
for (let mm=0; mm<=5; mm++){
$on_off_s_minute_option = $("<option value="+mm+"0>"+mm+"0</option>");
$on_off_e_minute_option = $("<option value="+mm+"0>"+mm+"0</option>");
$( $on_off_select_s_minute ).append( $on_off_s_minute_option );
$( $on_off_select_e_minute ).append( $on_off_e_minute_option );
}
$( $on_off_tr ).append( $on_off_th ); //th:출근/퇴근
$( $on_off_td ).append( $on_off_select_s_hour );
$( $on_off_td ).append( "시" );
$( $on_off_td ).append( $on_off_select_s_minute );
$( $on_off_td ).append( "분 출근 " );
$( $on_off_td ).append( $on_off_select_e_hour );
$( $on_off_td ).append( "시" );
$( $on_off_td ).append( $on_off_select_e_minute );
$( $on_off_td ).append( "분 퇴근 " );
$( $on_off_tr ).append( $on_off_td );
$( $tbody ).append( $on_off_tr );
// 근무자 tr
var $worker_tr = $("<tr>");
var $worker_th = "<th>근 무 자</th>";
var $worker_td = $('<td class="inp_ctt">');
var $worker_div = $('<div style="position:relative;left:3px;top:-1px;">');
var $worker_btn_human = $('<a class="btn_human" href="javascript:OrgViewForUserTripInputAdmin(\'form\', \'sin_user_name['+cnt_add+']\', \'sin_user_id['+cnt_add+']\', \'4\', \'<%=uai.szKey%>\');">');
var $worker_worker_name_div = $('<div style="width: 226px;display:inline-block;margin-left:30px;padding:3px 2px 0">');
var $worker_worker_name_div_input;
var $worker_worker_name_div_list = $('<div class="sin_user_name_list" style="width: 226px;display:inline-block;margin-left:30px;padding:3px 2px 0">');
if(<%=sui%> == null){
$worker_worker_name_div_input = $('<INPUT type=hidden name=sin_user_name data-addcnt='+cnt_add+' readonly size=20 value="<%=uai.szUserName%>"><INPUT type=hidden name=sin_user_id value="<%=uai.szUserID%>">');
}else{
$worker_worker_name_div_input = $('<INPUT type=hidden name=sin_user_name data-addcnt='+cnt_add+' readonly size=20 value="<%=name%>"><a href="javascript:reload_page();"><img src="./img/change.gif" alt=변경 border="0" height="20" width="36" align="absmiddle"></a><INPUT type=hidden name=sin_user_id value="<%=sui%>">');
}
$( $worker_tr ).append( $worker_th );// th:근무자
$( $worker_div ).append( $worker_btn_human );
$( $worker_div ).append( $worker_worker_name_div_list );
$( $worker_worker_name_div ).append( $worker_worker_name_div_input );
$( $worker_div ).append( $worker_worker_name_div );
$( $worker_td ).append( $worker_div );
$( $worker_tr ).append( $worker_td );
$( $tbody ).append( $worker_tr );
$(".content_table").append($tbody);
reSetTime();
sinUserViewerList(cnt_add);
}
function set_start_add(){//맨처음에 시작할 때는 [] 가 없어야함.
$("a.btn_human").eq(0).attr("href", "javascript:OrgViewForUserTripInputAdmin(\'form\', \'sin_user_name\', \'sin_user_id\', \'4\', \'<%=uai.szKey%>\');" );
}
$(document).ready(function(){
$(document).on("click", ".btn_add_content", function(){
cnt_add = cnt_add+1;
if(cnt_add != 0){
$("a.btn_human").eq(0).attr("href", "javascript:OrgViewForUserTripInputAdmin(\'form\', \'sin_user_name[0]\', \'sin_user_id[0]\', \'4\', \'<%=uai.szKey%>\');" );
}
add_cont();
});
$(document).on("click", ".btn_del", function(){
$(this).parent().parent().parent().remove();
cnt_add = cnt_add -1;
if(cnt_add == 0){
set_start_add();
}else{
for(let i=0; i <= cnt_add; i++){
$("a.btn_human").eq(i).attr("href", "javascript:OrgViewForUserTripInputAdmin(\'form\', \'sin_user_name["+i+"]\', \'sin_user_id["+i+"]\', \'4\', \'<%=uai.szKey%>\');" );
}
}
});
});
function sinUserViewerList(cnt_add) {
var listObj;
var nameObj;
var idObj;
var arrNames;
var arrIds;
if(cnt_add == 0){
listObj = $("div.sin_user_name_list");
nameObj = $("input[name=sin_user_name]");
idObj = $("input[name=sin_user_id]");
arrNames = nameObj.val().split(";");
arrIds = idObj.val().split(";");
}else{
listObj = $("div.sin_user_name_list").eq(cnt_add);
nameObj = $("input[name=sin_user_name]").eq(cnt_add);
idObj = $("input[name=sin_user_id]").eq(cnt_add);
arrNames = nameObj.val().split(";");
arrIds = idObj.val().split(";");
}
if (arrNames.length > 1) {
listObj.empty();
for (var i = 0; i < arrNames.length-1; i++) {
listObj.append(getSinUserViewHTML(arrNames[i], arrIds[i], cnt_add));
}
} else if (arrNames.length == 1) {
listObj.empty();
if (nameObj.val().length > 1) {
listObj.append(getSinUserViewHTML(nameObj.val(), idObj.val(), cnt_add));
}
}
}
//신청자명 태그 추가
getSinUserViewHTML = function(name, id, cnt_add) {
var html = "<em>" + name + "</em><a href=\"javascript:removeSinUserName('" + name + "','" + id + "', '" + cnt_add + "');\" class='btn_close'></a>";
var span = document.createElement("span");
span.className = "recipient";
span.innerHTML = html;
return span;
};
$(document).on("change", "input[name=sin_user_name]",function() {
var addcnt = $(this).attr("data-addcnt");
sinUserViewerList(addcnt);
});
// 신청페이지에서 신청자리스트에서 삭제
removeSinUserName = function (name, id, cnt_add) {
var $suName;
var $suId;
if(cnt_add == 0){
$suName = $("input[name=sin_user_name]");
$suId= $("input[name=sin_user_id]");
}else{
$suName = $("input[name=sin_user_name]").eq(cnt_add);
$suId= $("input[name=sin_user_id]").eq(cnt_add);
}
if ($suName.val().indexOf(name) != -1 && $suId.val().indexOf(id) != -1) {
var regEx = new RegExp(name + ";", "gi");
$suName.val($suName.val().replace(regEx, ""));
regEx = new RegExp(id + ";", "gi");
$suId.val($suId.val().replace(regEx, ""));
$suName.trigger("change");
} else {
alert("올바르지 않은 값이 들어가 있습니다.");
}
};
function n_submit(){
tf_val = form_submit();
if(tf_val){
document.form.submit();
}else{
//alert('no submit');
}
}
</script>
<html>
<head>
<title>근무일정 등록</title>
<style>
.title{padding: 20px !important; width: calc(100% - 100px); display: inline-block;}
.span_btn_add{background: url(/img/btn_white.png) no-repeat left 0; padding-left: 1px; top: 10px; position: absolute; height: 29px;}
.btn_add{display: inline-block; height: 19px; padding-right: 10px; padding-left: 9px; padding-top:10px; background: url(/img/btn_white.png) no-repeat right 0; text-align: center;color: #333; position: absolute; width: 25px; vertical-align: top;}
a.btn_add:hover{background-position: right -29px; text-decoration: none; z-index: 1000; border-right: 1px;color: #333;}
.del_th{border-right: 2px solid #ccc;}
.btn_del{width: auto !important; margin-top: 35px;}
span.btn_del img{width: 20px; height: 20px;}
.div_chk_time{display: inline-block; color: red; font-weight: bold;}
.wrong_div{display: inline-block; color: red; font-weight: bold; margin-left: 35px;}
.ani_background_color{
-webkit-animation-name: bc;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 2;
animation-duration: 0.5s;
animation-name: bc;
animation-iteration-count: 2;
}
@-webkit-keyframes bc {
from {background-color: white;}
to {background-color: #eee;}
}
@keyframes bc {
from {background-color: white;}
to {background-color: #eee;}
}
</style>
</head>
<body onload="self.focus(); add_cont();set_start_add();">
<form name=form method="post" action="trip_input.jsp">
<div class="title_area">
<h1 class="title" id="title_txt_left" name="title_txt_left">근무일정 등록</h1>
<span class="span_btn_add"><a class="btn_add" onclick="n_submit();">등록</a></span>
</div>
<form name=form method="post" onsubmit="return form_submit();" action="trip_input_admin_proc.jsp">
<div class="view_body_contents" style="height:auto">
<div class="pd_bttm_15 pd_rgt_15 pd_lft_15">
<p class="ctt_ttl" style="margin-top:3px">
관리자 정보
</p>
<div class="content_configlist">
<table>
<colgroup>
<col style="width: 150px;">
<col>
</colgroup>
<tbody>
<tr>
<th>
부 서 명
</th>
<td class="inp_ctt">
<%=uai.szDeptName%>
</td>
</tr>
<tr>
<th>
관 리 자
</th>
<td class="inp_ctt">
<%=uai.szUserName%>
</td>
</tr>
</tbody>
</table>
</div>
<p class="ctt_ttl" style="margin-top:3px">
신청 내역
</p>
<div class="content_configlist" id="content_configlist">
<table class="content_table">
<colgroup>
<col style="width: 50px;">
<col style="width: 150px;">
<col style="width: 100%;">
</colgroup>
</table>
</div>
<script language="javascript">
var tmp_sinUserID = "";
function startCheck() {
tmp_sinUserID = form.sin_user_id.value;
startCheck1()
}
function startCheck1() {
if(tmp_sinUserID != form.sin_user_id.value) {
//tmp_getSinUserPhoneFrame.location.href="trip_input_su.jsp?user_id=" + form.sin_user_id.value;
} else {
setTimeout("startCheck1()" ,100);
}
}
</script>
<div class="btn_area" id="up_button" style="background:none;">
<ul class="btns" style="float: right;">
<li>
<span><a title="추가" onfocus="blur();" class="btn_add_content">추가</a></span>
</li>
</ul>
</div>
</div>
</div>
<INPUT TYPE="HIDDEN" NAME="login_user_id" value='<%=uai.szUserID%>'>
<INPUT TYPE="HIDDEN" NAME="login_user_name" value='<%=uai.szUserName%>'>
<input type="hidden" name="cnt_add" value=''>
</form>
<form name='wform' target='pop' method="post" action="trip_org.jsp">
<input type=hidden name='wparam'>
</form>
</body>
</html>
<%@ include file ="./include/trip_footer.jsp"%>
참고페이지
728x90
'front > JS' 카테고리의 다른 글
| [JS] json으로 한글 넘길 때, 깨진다. (0) | 2022.07.22 |
|---|---|
| [JavaScript] 함수에서 Boolean return 시 undefined일 때 (0) | 2022.07.04 |
| [jQuery] 대소문자에 관계없이 검색어 하이라이트 기능 (0) | 2022.05.31 |
| [JQuery] jquery로 각각의 이미지의 가로길이에 따라서 width를 변경 (0) | 2022.05.11 |
| [JQuery] select 태그의 option 비활성화 - disabled (0) | 2022.03.30 |