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

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

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

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

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

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

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

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" rel="stylesheet">

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

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
                   <tr>
##                       <td width="20%">序号</td>
                       <td>时间选择</td>
                       <td>实际值</td>
                       <td>操作</td>
                   </tr>
                 </table>
                <input type="button" id="but" value="增加"/>
                <input type="hidden" id="dataDemandStatisticsCyclesNum" name = "dataDemandStatisticsCyclesNum"/>

当点击后，关联js部分：

$(document).ready(function(){
    //修改菜单的表格增加
    //<tr/>居中
    $("#tab tr").attr("align","center");
    //增加<tr/> _len总个数
    $("#but").click(function(){
        var _len = $("#tab tr").length;
        $("#tab").append("<tr id="+_len+" align='center'>"
            // +"<td>"+_len+"</td>"
            // +"<td>Dynamic TR"+_len+"</td>"
            +"<td><div>开始日期<input type='date' value='-' placeholder='' name='dataDemandStatisticsCycleStart"+_len+"' id = 'dataDemandStatisticsCycleStart"+_len+"' style='width: 110px' onchange='dateRangePickIndex("+_len+")'></div>" +
            "<div>结束日期<input type='date' value='-' placeholder='' name='dataDemandStatisticsCycleEnd"+_len+"' id = 'dataDemandStatisticsCycleEnd"+_len+"' style='width: 110px' onchange='dateRangePickIndex("+_len+")'></div></td>"
            +"<td><input type='text' name='dataDemandStatisticsCycles"+_len+"' id='dataDemandStatisticsCycles"+_len+"' style='width: 150px' disabled='disabled'/></td>"
            +"<td><a href=\'#\' onclick=\'deltr("+_len+",1)\'>删除</a></td>"
            +"</tr>");
        document.getElementById("dataDemandStatisticsCyclesNum").value=_len;

    })

});

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

//修改菜单的删除<tr/>
//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<j;i++)
        {
            var nextTxtVal = $("#dataDemandStatisticsCycles"+i).val();
            $("tr[id=\'"+i+"\']")
                .replaceWith("<tr id="+(i-1)+" align='center'>"
                    // +"<td>"+(i-1)+"</td>"
                    // +"<td>Dynamic TR"+(i-1)+"</td>"
                    +"<td><div>开始日期<input type='date' value='-' placeholder='' name='dataDemandStatisticsCycleStart"+_len+"' id = 'dataDemandStatisticsCycleStart"+_len+"' style='width: 110px' onchange='dateRangePickIndex("+(i-1)+")'></div>" +
                    "<div>结束日期<input type='date' value='-' placeholder='' name='dataDemandStatisticsCycleEnd"+_len+"' id = 'dataDemandStatisticsCycleEnd"+_len+"' style='width: 110px' onchange='dateRangePickIndex("+(i-1)+")'></div></td>"
                    +"<td><input type='text' name='dataDemandStatisticsCycles"+(i-1)+"' value='"+nextTxtVal+"' id='dataDemandStatisticsCycles"+(i-1)+"' style='width: 150px' style='width: 150px' disabled='disabled'/></td>"
                    +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+",0)\'>删除</a></td>"
                    +"</tr>");
        }
    }

    if(type === 1) {
        for(var i=index+1,j=_len;i<j;i++)
        {
            var nextTxtVal = $("#dataDemandStatisticsCycles"+i).val();
            $("tr[id=\'"+i+"\']")
                .replaceWith("<tr id="+(i-1)+" align='center'>"
                    // +"<td>"+(i-1)+"</td>"
                    // +"<td>Dynamic TR"+(i-1)+"</td>"
                    +"<td><div>开始日期<input type='date' value='-' placeholder='' name='dataDemandStatisticsCycleStart"+_len+"' id = 'dataDemandStatisticsCycleStart"+_len+"' style='width: 110px' onchange='dateRangePickIndex("+(i-1)+")'></div>" +
                    "<div>结束日期<input type='date' value='-' placeholder='' name='dataDemandStatisticsCycleEnd"+_len+"' id = 'dataDemandStatisticsCycleEnd"+_len+"' style='width: 110px' onchange='dateRangePickIndex("+(i-1)+")'></div></td>"
                    +"<td><input type='text' name='dataDemandStatisticsCycles"+(i-1)+"' value='"+nextTxtVal+"' id='dataDemandStatisticsCycles"+(i-1)+"' style='width: 150px' disabled='disabled'/></td>"
                    +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+",1)\'>删除</a></td>"
                    +"</tr>");
        }
        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的那部分简略了。