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

      

  • 相关阅读:
    Maximum Depth of Binary Tree
    Single Number
    Merge Two Sorted Lists
    Remove Nth Node From End of List
    Remove Element
    Remove Duplicates from Sorted List
    Add Two Numbers
    编译视频直播点播平台EasyDSS数据排序使用Go 语言 slice 类型排序的实现介绍
    RTMP协议视频直播点播平台EasyDSS在Linux系统中以服务启动报错can’t evaluate field RootPath in type*struct排查
    【解决方案】5G时代RTMP推流服务器/互联网直播点播平台EasyDSS实现360°全景摄像机VR直播
  • 原文地址:https://www.cnblogs.com/c-x-a/p/6484812.html
Copyright © 2011-2022 走看看