zoukankan      html  css  js  c++  java
  • 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
    	    	 });
    		  
    	}
    

      

  • 相关阅读:
    自编码变分贝叶斯(转载)
    加载Pytorch中的预训练模型及部分结构的导入
    pytorch读入图片并显示np.transpose(np_image, [1, 2, 0])
    高斯分布、多维高斯分布、各向同性的高斯分布及多元高斯分布之间的KL散度
    pytorch中的上采样(上采样,转置卷积,上池化,PixelShuffle)
    卷积算法动画演示
    PL/SQL编程基础
    PL/SQL Dev 调试
    PL/SQL Dev的安装与连接远程数据库
    Bean Form DTO VO Entity
  • 原文地址:https://www.cnblogs.com/c-x-a/p/6484812.html
Copyright © 2011-2022 走看看