$(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 实现添加表格行,删除行,调用日期控件的更多相关文章

  1. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  2. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

  3. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  4. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  5. 【前端控件】JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  6. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  7. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  8. 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等

    转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...

  9. FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)

    FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...

随机推荐

  1. 洛谷 P4151 [WC2011]最大XOR和路径 解题报告

    P4151 [WC2011]最大XOR和路径 题意 求无向带权图的最大异或路径 范围 思路还是很厉害的,上午想了好一会儿都不知道怎么做 先随便求出一颗生成树,然后每条返祖边都可以出现一个环,从的路径上 ...

  2. py3+requests+re+urllib,爬取并下载不得姐视频

    实现原理及思路请参考我的另外几篇爬虫实践博客 py3+urllib+bs4+反爬,20+行代码教你爬取豆瓣妹子图:http://www.cnblogs.com/UncleYong/p/6892688. ...

  3. luogu2680 [NOIp2015]运输计划 (tarjanLca+二分答案+树上差分)

    我们先不会就二分一下答案,设它是x,我们要判断它能不能满足 为了满足这个答案,我们就要让原本路径长度大于x的所有路径都经过某条边,而且这条边还要大于等于最长的路径-x 于是运用树上差分的思想,对于所有 ...

  4. pyEcharts

    例子: from pyecharts import Line line = Line("我的第一个图表", "这里是副标题",width="800px ...

  5. 使用 <!DOCTYPE html> 让 <div><img></div>中的图片下面产生几个像素的空白间隔

    今天算是第一次使用 <!DOCTYPE html> 不经意间发现图片下方有5个像素左右的空白间隔,检查半天也没查出原因. 最后百度了一下,网上说这是 <!DOCTYPE html&g ...

  6. IntelliJ IDEA的使用操作链接

    一:IntelliJ IDEA导入多个eclipse项目到同一个workspace下: http://www.cnblogs.com/ThinkVenus/p/6783961.html?utm_sou ...

  7. 第一次使用Android Studio时你应该知道的一切配置(一)

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  8. laravel redis 删除指定前缀的 key

    // 前缀 $prefix = 'abc'; // 需要在前面连接上应用的缓存前缀 $keys = app('redis')->keys(config('cache.prefix') . $pr ...

  9. (stripTrailingZeros)A == B hdu2054

    A == B ? Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  10. ngrep 比 tcpdump 更方便查看的抓包显示工具

    ngrep 是grep(在文本中搜索字符串的工具)的网络版,他力求更多的grep特征,用于搜寻指定的数据包 一: ngrep的安装 CentOS6.2 64位 wget http://nchc.dl. ...