$(function () { getdatepicker(); getdatetimepicker(); }); $(document).on('click','#addTable',addTr); $(document).on('click','#deleteTable',deleteTr); function getdatepicker() { $("input[name='applydate']").datepicker({ clearBtn : true, language : "ja", autoclose : true }); } function getdatetimepicker() { $("input[name='datetime']").datetimepicker({ clearBtn : true, language : "ja", autoclose : true }); } function deleteTr(){ var i=$('#countTable').find('tr').size(); if(i!=2) { $("#countTable tr").eq(i-1).remove(); } } function addTr(){ var tr_len=$('#countTable').find('tr').size(); var i=tr_len-1; var tr="<tr>"; tr=tr+"<td class='col-lg-2' id='applydatetb"+i+"'>"; tr=tr+" <div class='input-group date' id='datepicker"+i+"'>"; tr=tr+" <input type='text' class='form-control input-sm col-lg-1' id='clickDateFrom"+i+"' name='datepicker'>"; tr=tr+" <span class='input-group-addon'><i class='glyphicon glyphicon-th'></i></span>"; tr=tr+" </div>"; tr=tr+"</td>"; tr=tr+"<td class='col-lg-2' id='applykbtb"+i+"'>"; tr=tr+"<form role='form'>"; tr=tr+" <div class='form-group'>"; tr=tr+" <select class='form-control'>"; tr=tr+" <option>休假</option>"; tr=tr+" <option>平日加班</option>"; tr=tr+" <option>休日加班</option>"; tr=tr+" </select>"; tr=tr+" </div>"; tr=tr+" </form>"; tr=tr+"</td>"; tr=tr+"<td class='col-lg-2' id='startDateTimetb"+i+"'>"; tr=tr+" <div class='form-group'> "; tr=tr+" <div class='input-group datetime' id='datetimepicker1"+i+"'>"; tr=tr+" <input type='text' class='form-control input-sm col-lg-1' id='applyDateTimeFrom"+i+"' name='datetime' >"; tr=tr+" <span class='input-group-addon'><i class='glyphicon glyphicon-th'></i></span>"; tr=tr+" </div> "; tr=tr+" </div> "; tr=tr+"</td>"; tr=tr+"<td class='col-lg-2' id='EndDateTimetb"+i+"'>"; tr=tr+" <div class='input-group datetime' id='datetimepicker2"+i+"'>"; tr=tr+" <input type='text' class='form-control input-sm col-lg-1' id='applyDateTimeTo"+i+"' name='datetime' >"; tr=tr+" <span class='input-group-addon'><i class='glyphicon glyphicon-th'></i></span>"; tr=tr+" </div>"; tr=tr+"</td>"; tr=tr+"<td class='col-lg-2' id='resontb"+i+"'>"; tr=tr+" <input type='text' class='form-control input-sm col-lg-1' id='reson"+i+"'></input>"; tr=tr+" </td>"; tr=tr+" <td class='col-lg-2' id='statustb"+i+"'>"; tr=tr+" <select class='form-control'>"; tr=tr+" <option>已确认</option>"; tr=tr+" <option>待确认</option>"; tr=tr+" </select>"; tr=tr+ " </span>"; tr=tr+"</td>"; tr=tr+ "<td class='col-lg-2' id='addBtntb"+i+"'>"; //tr=tr+ "<span class='glyphicon glyphicon-plus-sign' aria-hidden='true' id='addTable"+i+"'></span>"; tr=tr+"</td>"; tr=tr+" <td class='col-lg-2' id='delBtntb"+i+"'>"; //tr=tr+" <span class='glyphicon glyphicon-minus-sign' aria-hidden='true' id='deleteTable"+i+"'></span>"; tr=tr+"</td>"; tr=tr+"</tr>"; $("#countTable").append(tr); $("#clickDateFrom"+i).datepicker({ clearBtn : true, language : "ja", autoclose : true }); $("#applyDateTimeFrom"+i).datetimepicker({ clearBtn : true, language : "ja", autoclose : true }); $("#applyDateTimeTo"+i).datetimepicker({ clearBtn : true, language : "ja", autoclose : true }); }