HTML之动态添加、删除

 

功能如图,每次点击增加按钮会生成新的一行日期,且无论删除了哪一行、多少行,都会在最后一行后面追加生成新的一行。最初的思路是把生成的日期行放在一个table里,这样每次点击增加在该table后面追加一行就可以了,但这样会增加一个table,当页面布局要求只有一个table时,新加的table对页面整体布局会有不小的影响。鉴于自己作为“前端小白”,还不太会处理多table布局,考虑后决定采用如下方法:

function addDate() {
    var rows = $("[name='startDates']").length;
    var startDates = $("[name='startDates']");
    var currentRow = Number(startDates[rows -1].id.split("_")[1]);
    var nextRow = currentRow + 1;
    $("#date_tr_" + currentRow).after('<tr id="date_tr_' + nextRow + '">'
        + '<td>'
        + '<input type="checkbox" name="dateCheckBox" id="dateCheckBox_' + nextRow + '" />'
        + '</td>'
        + '<td colspan="2">'
        + ' 从'
        + '<input type="text" id="startDate_' + nextRow + '" name="startDates"  readonly="true" />'
        + '<a href="javascript:setEmpty(\'startDate_' + nextRow + '\');"> 清空</a>'
        + ' 到<input type="text" id="endDate_' + maxCount + '" name="endDates" readonly="true" />'
        + '<a href="javascript:setEmpty(\'endDate_' + nextRow + '\');"> 清空</a>'
        + '</td> </tr>');
}

思路:通过 $("[name='startDates']")可以获得当前添加的日期列表,而最后一次添加的一行日期必定是该列表的最后一条,这样通过Number(startDates[rows -1].id.split("_")[1])就能拿到最后一行的id记录了,新添加只要将该改记录加一即可。同时附上删除代码:

function delDate() {
    var checkboxs = $("[name='dateCheckBoxs']");
    for (var i = 0; i < checkboxs .length; i++) {
        var row = Number(checkboxs [i].id.split("_")[1]);
        $("#date_tr_" + row).remove();
    }
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值