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();
    }
}