jQuery 实现添加表格行,删除行,调用日期控件

$(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
	    	 });
		  
	}

  

原文地址:https://www.cnblogs.com/c-x-a/p/6484812.html