html的表格动态添加和删除行

主要效果是这样的，可以动态添加和删除对应的列

表格删除一行，即把后面的表格都向前移动一行，并把总行数减一即可。

表格添加一行，就利用js拼html的方式把表格拼出来。

因为实际值受到选择的影响，需要一个联动的操作。

又因为业务需要从后台数据库拿到表格有多少行的数据，并对每行进行展现，需要连接一下数据库。

因为利用了dataTables插件，需要引入一下。

然后对前端的表格，这么显示：

##                       

                   
序号
                       
时间选择
                       
实际值
                       
操作
                   
                 
                
                

当点击后，关联js部分：

$(document).ready(function(){
    //修改菜单的表格增加
    //居中
    $("#tab tr").attr("align","center");
    //增加 _len总个数
    $("#but").click(function(){
        var _len = $("#tab tr").length;
        $("#tab").append(""
            // +""+_len+""
            // +"Dynamic TR"+_len+""
            +"
开始日期
" +
            "
结束日期
"
            +""
            +"删除"
            +"");
        document.getElementById("dataDemandStatisticsCyclesNum").value=_len;

    })

});

点击删除的操作如下。用type区分一下是普通的点击删除，还是清除模式。清除模式是上一次操作后，可能会在页面存在表格的缓存，清除之后就没有表格的缓存了：

//修改菜单的删除
//type = 0,清除模式。1，删除模式。
var deltr =function(index,type)
{
    var _len = $("#tab tr").length;
    $("tr[id='"+index+"']").remove();//删除当前行
    if(type == 0) {
        for(var i=index+1,j=_len;i"
                    // +""+(i-1)+""
                    // +"Dynamic TR"+(i-1)+""
                    +"
开始日期
" +
                    "
结束日期
"
                    +""
                    +"删除"
                    +"");
        }
    }

    if(type === 1) {
        for(var i=index+1,j=_len;i"
                    // +""+(i-1)+""
                    // +"Dynamic TR"+(i-1)+""
                    +"
开始日期
" +
                    "
结束日期
"
                    +""
                    +"删除"
                    +"");
        }
        document.getElementById("dataDemandStatisticsCyclesNum").value=_len-2;
    }
}

日期随时间的联动：

function dateRangePickIndex(index){
    var dataDemandStatisticsCycleStart = document.getElementById('dataDemandStatisticsCycleStart'+index).value;
    var dataDemandStatisticsCycleEnd = document.getElementById('dataDemandStatisticsCycleEnd'+index).value;
    dataDemandStatisticsCycleStart = dataDemandStatisticsCycleStart.replace("-","/").replace("-","/");
    dataDemandStatisticsCycleEnd = dataDemandStatisticsCycleEnd.replace("-","/").replace("-","/");
    document.getElementById('dataDemandStatisticsCycles'+index).value = dataDemandStatisticsCycleStart + '-' + dataDemandStatisticsCycleEnd;
}

因为业务需要点击修改时，从数据库拿到值，并输出到表格框里，java的那部分简略了。