layui动态添加input_layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用...

起因

本人是在一家互联金融公司，因项目需求 要实现如上图的效果 从网上查阅了很多资料 ，无果而终，最终想到了 动态更改id 避免id重复 调用失败

保守派 --- 行内调用

付息日期 :

• 增加

  第1次付息日期 :

切记 要引入 laydate.js 这里用到的是独立版本的 具体用法 可以参照官网文档

//付息日期

fuxiTime();

function fuxiTime() {

if(!$(".fuxiTime .caozuo_btn")) return;

var i = 2;

$("ul#fuxiTime_containt").delegate(".caozuo_btn", "click", function() {

var lis = "

" +

"删除" +

"第" + i + "次付息日起 :" +

"

" +

" " +

"

" +

"

";

if($(this).is(".caozuo_add")) {

$(this).parents("ul").append(lis);

i++;

};

if($(this).is(".caozuo_delete")) {

$(this).parent("li").remove();

};

})

}

开放现代写法

使用 layDate 独立版

body{padding: 20px;}

.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}

.demo-footer{padding: 50px 0; color: #999; font-size: 14px;}

.demo-footer a{padding: 0 5px; color: #01AAED;}

增加

// lay('#version').html('-v'+ laydate.v);

//执行一个laydate实例

laydate.render({

elem: '#add_time' //指定元素

});

var num = 2;

function addTime(){

$('.addTime'+(parseInt(num)-parseInt(1))).after(

"
"+

"添加"+num+"时间："+

""+

""+

"增加"+

""

);

//执行一个laydate实例

laydate.render({

elem: '#add_time'+num //指定元素

});

num++;

}

关于 日期插件 样式说明

layDate 版本不同 样式也就不同 当然功能没有太大变化 所以说样式和CSS 没有很大的关联性。

结束

思路固然 重要 ， 但是没有先人指路，也是虾扯淡！