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
	    	 });
	}
jQuery 实现添加表格行,删除行,调用日期控件的更多相关文章
- jquery 动态添加表格行
		
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
 - layui table 表格上添加日期控件
		
方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...
 - jQuery Datepicker日期控件
		
datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...
 - JQuery datepicker 日期控件设置
		
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
 - 【前端控件】JQuery datepicker 日期控件设置
		
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
 - jquery datepicker-强大的日期控件
		
在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...
 - jQuery  UI  日期控件--datepicker
		
在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...
 - 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等
		
转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...
 - FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)
		
FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...
 
随机推荐
- php多进程、IPC和事件驱动
			
http://www.laruence.com/2008/04/21/101.html http://zhidao.baidu.com/link?url=zXm_12CxqGo-xYvOF4oyBJC ...
 - The 2018 ACM-ICPC China JiangSu Provincial Programming Contest快速幂取模及求逆元
			
题目来源 The 2018 ACM-ICPC China JiangSu Provincial Programming Contest 35.4% 1000ms 65536K Persona5 Per ...
 - HTML5小游戏-简单抽奖小游戏
			
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
 - Python数据类型(列表和元组)
			
1.3 List(列表) 列表由一系列按特定顺序排列的元素组成. 在Python中,用方括号[ ]来表示列表,并用逗号来分隔其中的元素. 1.3.1 访问列表元素 在Python中,第一个列表元素的索 ...
 - 循环viewpager
			
如果viewpager listadapter小于三个.用这个移除异常. for (View view : viewList) { ViewGroup p = (ViewGro ...
 - R语言:随机抽样(sample函数)
			
如果想从一堆数据集中随机抽出一个数,用sample函数就能实现,代码展示如下: forehead<-c(249,189,128,111,184,233,313,120,151,196,135,1 ...
 - Eclipse集成Gradle 【Eclipse在线安装Gradle插件方法】
			
本章将介绍了Eclipse集成Gradle.以下是将Gradle插件添加到Eclipse的步骤. 步骤1 - 打开Eclipse Marketplace 打开在系统中安装好的Eclipse. 转到 J ...
 - Telnet的三种登录方式
			
Telnet的三种登录方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.华为创建telnet的三种验证方式 首先,我们可以简单的看一个拓扑图,让我们可以在亦庄的路由器上对双桥 ...
 - JavaSE学习总结(五)——封装,继承,多态很简单
			
java面向对象的三大特性是:封装.继承与多态,是面向对象编程的核心. 一.封装 简单说封装就是将同一类事物的特性与功能包装在一起,对外暴露调用的接口. 封装:封装也称信息隐藏,是指利用抽象数据类型把 ...
 - 深入理解 BFC
			
W3C 规范中 BFC的定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不 ...