jQury动态添加与删除一行优化版

<div class="s-power-form">
    <div class="ui form p80-form clearfix write-content">
        <div class="w-content-top">
            <div class="inline fields">
                <label>工作日期</label>
                <input type="text" placeholder="First Name" class="datepicker">
                <i class="iconfont icon-rili"></i>
            </div>
            <div class="inline fields clear-both">
                <label>是否补填</label>
                <div class="ui checkbox">
                    <input type="checkbox" name="example" class="write-check">
                </div>
            </div>
            <div class="inline fields textarea-hide" style="display: none;">
                <label>补填原因</label>
                <textarea rows="2"></textarea>
            </div>
        </div>
        <div class="w-content-bottom">
            <div class="work-btn radius-btn">
                <a href="javascript:;" class="del-w-btn"><i class="iconfont icon-shanchuxiangmu"></i>删除报工项</a>
                <a href="javascript:;" class="add-w-btn"><i class="iconfont icon-tianjiaxiangmu"></i>添加报工项</a>
            </div>
        </div>
        <div class="work-content-temp" style="display: none">
            <div class="work-content-item">
                <div class="inline fields">
                    <label>项目</label>
                    <select class="ui selection dropdown">
                        <option value="0">广州地铁</option>
                        <option value="1">华莱士</option>
                    </select>
                </div>
                <div class="inline fields select-operate">
                    <label>模块</label>
                    <select class="ui selection dropdown">
                        <option value="0">项目管理</option>
                        <option value="1">人才机管理</option>
                        <option value="2">文档库管理</option>
                    </select>
                </div>
                <div class="inline fields date-input">
                    <label>开始时间</label>
                    <input type="text" placeholder="First Name" class="timepicker">
                </div>
                <div class="inline fields date-input">
                    <label>结束时间</label>
                    <input type="text" placeholder="First Name" class="timepicker">
                </div>
                <div class="inline fields date-input clear-both">
                    <label>工作时间</label>
                    <input type="text" placeholder="7.5小时">
                    <span class="mgl10 gary">
                    (注:标准工作时间为 09:00~12:00,13:30~18:00)
                </span>
                </div>
                <div class="inline fields clear-both">
                    <label>工作内容</label>
                    <textarea rows="5"></textarea>
                </div>
            </div>
        </div>
        <div class="clear-both bottom-btn mgt20">
            <button class="ui button active">保存</button>
            <button class="ui button">取消</button>
        </div>
    </div>
</div>
jq:
//初始化
contentInit();
initBtn();
$('.w-content-bottom').on('click','.work-btn>.add-w-btn',function () {  //事件委托添加
    contentInit();
    initBtn();  //按钮处理
    $('.timepicker').pickatime({    //再次初始化日期插件
        clear: '清除'
    });
    $('.ui.dropdown').dropdown();  //再次初始化下拉框
});
$('.w-content-bottom').on('click','.work-btn>.del-w-btn',function () {  //事件委托删除
    var deleObj = $(this).parents('.w-content-bottom').children('div:eq(-2)');
    deleObj.slideUp(200,function () {
        deleObj.remove();
        initBtn();  //按钮处理
    })
});
//插入内容
function contentInit() {
    var item = $('.work-content-temp').html();
    $('.w-content-bottom>.work-btn').before(item);//模板内容插入标签中
}
//按钮处理
function initBtn() {
    $('.w-content-bottom>.work-content-item').each(function(index, obj){
        if ($('.w-content-bottom>.work-content-item').length == 1){
            $(this).parent('.w-content-bottom').find('.work-btn>.del-w-btn').hide(); //初始化隐藏删除按钮
        }else {
            $(this).parent('.w-content-bottom').find('.work-btn>.del-w-btn').show();
        }
    })
}
附图:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值