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

      

  • 相关阅读:
    Hosts知多少?
    Google 谷歌网页搜索, 学术搜索
    机器学习是什么?
    SCI/EI期刊投稿 Reply Letter 常用格式总结
    解决Javascript中$(window).resize()多次执行
    Jquery使容器自适应浏览器窗口
    java中GET方式提交和POST方式提交
    java调试打断点和不打断点执行结果不一致问题解决
    EasyUI combobox的panelHeight自动高度
    跨服务器查询信息的sql
  • 原文地址:https://www.cnblogs.com/c-x-a/p/6484812.html
Copyright © 2011-2022 走看看