//상영회차(시간) 추가 function addTime() { // item 의 최대번호 구하기 var lastItemNo = $("#screentime tr:last").attr("class").replace("item", ""); var newitem = $("#screentime tr:eq(1)").clone(); newitem.removeClass(); newitem.find("#starttime").val(""); newitem.find("#endtime").val(""); newitem.find("td:eq(0)").attr("rowspan", "1"); newitem.addClass("item"+(parseInt(lastItemNo)+1)); $("#screentime").append(newitem); return; } //상영회차(시간) 제거 function delTime(obj) { var clickedRow = $(obj).parent().parent(); var cls = clickedRow.attr("class"); // 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다. if( clickedRow.find("td:eq(0)").attr("rowspan") ){ if( clickedRow.next().hasClass(cls) ){ clickedRow.next().prepend(clickedRow.find("td:eq(0)")); } } clickedRow.remove(); // rowspan 조정 var rowspan = $("."+cls).length; $("."+cls+":first td:eq(0)").attr("rowspan", rowspan); } // 영화 종료시간 자동 계산 function cal(obj) { var clickedRow = $(obj).parent().parent(); var cls = clickedRow.attr("class"); // 해당 클래스 내 starttime 선택자 형식 $(.item1 .starttime) var startcls = "." + cls + " .starttime"; var time = $(startcls).val(); var hours = parseInt(time.split(':')[0]); var minutes = parseInt(time.split(':')[1]); if($("#movieList option:selected").val() == "") { alert("영화를 먼저 선택하세요!"); return; } //var slt = $( "#movieList option:selected" ).text(); var slt = "셜록: 유령신부 / 2016-01-02개봉 / 드라마 / 12세관람가 / 115분"; var movieInfo = slt.split('/'); // 영화 정보 중 시간정보가 항상 배열 맨 마지막에 있을 때 var runtime = movieInfo[movieInfo.length - 1]; runtime = runtime.replace("분", ""); while(runtime>=60) { runtime -= 60; hours++; } minutes += runtime; if(minutes>=60) { minutes -= 60; hours++; } // 해당 클래스 내 endtime 선택자 형식 $(.item1 .endtime) var endcls = "." + cls + " .endtime"; hours = hours.toString().length<2 ? '0' + hours : hours; minutes = minutes.toString().length<2 ? '0' + minutes : minutes; $(endcls).val(hours + ":" + minutes); }
<label>일일상영횟수</label> <input type="button" value="상영시간추가" onclick="addTime()" /> <table id="screentime"> <tr> <th>시작시간</th> <th>종료시간</th> <th></th> </tr> <tr class="item1"> <td><input type="time" class="starttime" name="starttime" id="starttime" onchange="javascript:cal(this)"/></td> <td><input type="time" class="endtime" name="endtime" id="endtime" disabled/></td> <td><input type="button" value="삭제" class="btn btn-outline btn-primary btn-xs" onclick="javascript:delTime(this);"/></td> </tr> <tr class="item2"> <td><input type="time" class="starttime" name="starttime" id="starttime" onchange="javascript:cal(this)"/></td> <td><input type="time" class="endtime" name="endtime" id="endtime" disabled/></td> <td><input type="button" value="삭제" class="btn btn-outline btn-primary btn-xs" onclick="javascript:delTime(this);"/></td> </tr> </table>