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 ...
随机推荐
- [luogu3505][bzoj2088][POI2010]TEL-Teleportation【分层图】
题目大意 给出了一个图,然后让你加最多的边,让点\(1\)到\(2\)之间至少要经过5条边 解法 比较清楚,我们可以将这个图看作一个分层图,点\(1\)为第一层,再将\(2\)作为第五层,这样第一层和 ...
- FreeRTOS不允许在中断服务程序和临界段中执行不确定的性的操作
举例 等待事件标志组的任务,要是在中断服务程序中设置事件标志组,但不知道当前有多少个任务在等待此事件标志,这个操作即为不确定性操作,为了不在中断服务程序中执行此不确定性操作,只在中断服务程序中给一确定 ...
- Java内存模型基础
Java内存模型的基础 并发编程模型的两个关键问题 在并发编程种,需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来交换信息.在 ...
- Raspbian开启root账户
启用root账户 使用默认用户pi,密码raspberry登录树莓派 sudo passwd root #给root账户设置密码 sudo passws --unlock root #解除root账户 ...
- Raspbian首次安装后无法使用SSH链接
使用Putty连接树莓派,出现Network Error:Connection Refused 新版的Raspbian系统默认禁用了SSH. 解决方法:在/boot分区创建名为"ssh&qu ...
- 【洛谷P1638】逛画展
题目大意:给定 N 个数字组成的序列,求刚好拥有所有 M 种数字的最短区间. 题解:双指针算法是一种对于暴力的优化算法,对于这道题来说,一个显然的暴力是:对于序列中每一个位置 pos,计算出这个位置右 ...
- NO.11 复制时勿忘其每个成分
1.Coping 函数应该确保复制对象内的"每一个成员变量",和调用合适的 "base class"构造函数(base class 某些成员往往是private ...
- Codeforces Round #510 (Div. 2)(B)
传送门:Problem B https://www.cnblogs.com/violet-acmer/p/9682082.html 题意: 如果可以通过喝果汁将维生素A,B,C全部摄取,求最小花费,如 ...
- 获取Field成员变量类
位于java.lang.reflect.Field包中 getModifiers() 成员变量修饰符(public.private) getName() 成员变量名字 getType() 成员变量类型 ...
- SpringRMI远程方法调用【原】
Spring为各种远程访问技术的集成提供了工具类. 该小段引用自 http://www.open-open.com/lib/view/open1408957290478.html Spring远程支持 ...