JS动态添加表行，并验证数据，获取数据。

    前段时间做项目需要用JS方式无刷新的动态添加行，并且行中有一些控件，用户点击“保存”按钮能验证用户输入的数据是否合法。在网上查了好的的案例，各有各的特色，以下是自己的实现方法，与大家分享希望能帮助别人。

因为CSDN上的代码编辑器比较麻烦，所以只能这样无修饰的给大家贴出来。在这强烈建议CSDN更新。

《 HTML代码开始》

<asp:Button ID="btnSave" runat="server" Text="保存" OnClientClick="return saveData();" />
<asp:Button ID="btnHisData" runat="server" Text="添加行" OnClientClick="return addRows();" />

 

    <table cellpadding="0" cellspacing="0" id="tbl1" runat="server">
        <tr>
            <th>日期</th>
            <th>行1</th>
            <th>行2</th>
            <th>行3</th>
            <th>行4</th>
            <th>行5</th>
            <th>行6</th>
            <th>行7</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><asp:TextBox ID="dpDate1" runat="server" Width="80px"/></td>
            <td><asp:TextBox ID="txtR1_1" runat="server" Width="80px" /></td>
            <td><asp:TextBox ID="txtR1_2" runat="server" Width="80px" /></td>
            <td><asp:TextBox ID="txtR1_3" runat="server" Width="80px" /></td>
            <td><asp:TextBox ID="txtR1_4" runat="server" Width="80px" /></td>
            <td><asp:TextBox ID="txtR1_5" runat="server" Width="80px" /></td>
            <td><asp:TextBox ID="txtR1_6" runat="server" Width="80px" /></td>
            <td><asp:TextBox ID="txtR1_7" runat="server" Width="80px" /></td>
            <td><input type="hidden" id="reC" value="1" /></td>
        </tr>
    </table>

《 HTML代码结束》

 

《JS代码开始》

 

<script language="javascript" type="text/javascript">
        function addRows() {
            //记录总共添加几行
            document.getElementById("reC").value = parseInt(document.getElementById("reC").value) + 1;
            //添加一行
            var i = parseInt(ctl00_ContentPlaceHolder1_tbl1.rows.length);
            var newTr = ctl00_ContentPlaceHolder1_tbl1.insertRow();
            //添加列
            var newTd0 = newTr.insertCell();
            var newTd1 = newTr.insertCell();
            var newTd2 = newTr.insertCell();
            var newTd3 = newTr.insertCell();
            var newTd4 = newTr.insertCell();
            var newTd5 = newTr.insertCell();
            var newTd6 = newTr.insertCell();
            var newTd7 = newTr.insertCell();
            var newTd8 = newTr.insertCell();
            //设置列内容和属性
            newTd0.innerHTML = '<input type="text" id="dpDate' + i + '_dpDate' + i + '" style="width:80px;" />';
            newTd1.innerHTML = '<input type="text" id="txtR' + i + '_1" style="width:80px;" />';
            newTd2.innerHTML = '<input type="text" id="txtR' + i + '_2" style="width:80px;" />';
            newTd3.innerHTML = '<input type="text" id="txtR' + i + '_3" style="width:80px;" />';
            newTd4.innerHTML = '<input type="text" id="txtR' + i + '_4" style="width:80px;" />';
            newTd5.innerHTML = '<input type="text" id="txtR' + i + '_5" style="width:80px;" />';
            newTd6.innerHTML = '<input type="text" id="txtR' + i + '_6" style="width:80px;" />';
            newTd7.innerHTML = '<input type="text" id="txtR' + i + '_7" style="width:80px;" />';
            newTd8.innerHTML = '<input type="submit" value="删除该行" οnclick="return deleRow();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnDele' + i + '&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnDele' + i + '" />';

            return false;
        }

        function saveData() {
            var reData = "";
            //验证第一行日期是否为空，及日期格式是否正确
            var date = document.getElementById("ctl00_ContentPlaceHolder1_dpDate1");
            if (date.value == "") {
                alert("日期不能为空！");
                date.focus();
                return false;
            }
            else {
                var objRegExp = /^/d{4}(/-|//|/.)/d{1,2}/1/d{1,2}$/;
                if (!objRegExp.test(date.value)) {
                    alert("日期格式不正确！");
                    date.focus();
                    return false;
                }
            }
            reData += date.value + ",";
            //验证第一行规格/地区输入的值是否为空，及是否正确
            for (var i = 1; i <= 7; ++i) {
                var iV = document.getElementById("ctl00_ContentPlaceHolder1_txtR1_" + i + "");
                if (iV.value == "") {
                    alert("值不能为空！");
                    iV.focus();
                    return false;
                }
                if (!isFloat(iV.value)) {
                    alert("输入的值格式不正确！");
                    iV.focus();
                    return false;
                }
                if (i != 7) {
                    reData += iV.value + ",";
                }
                else {
                    reData += iV.value + "|";
                }
            }

            var reC = parseInt(document.getElementById("reC").value);
            for (var i = 2; i <= reC; ++i) {
                var a = document.getElementById("txtR" + i + "_1");
                if (a != null) {
                    var dpDate = document.getElementById("dpDate" + i + "_dpDate" + i);
                    if (dpDate.value == "") {
                        alert("日期不能为空！");
                        dpDate.focus();
                        return false;
                    }
                    var objRegExp = /^/d{4}(/-|//|/.)/d{1,2}/1/d{1,2}$/;
                    if (!objRegExp.test(dpDate.value)) {
                        alert("日期格式不正确！");
                        dpDate.focus();
                        return false;
                    }
                    reData += dpDate.value + ",";
                    for (var l = 1; l <= 7; ++l) {
                        var txtR = document.getElementById("txtR" + i + "_" + l);
                        if (txtR.value == "") {
                            alert("值不能为空！");
                            txtR.focus();
                            return false
                        }
                        if (!isFloat(txtR.value)) {
                            alert("输入的值格式不正确！");
                            txtR.focus();
                            return false;
                        }
                        if (l != 7) {
                            reData += txtR.value + ",";
                        }
                        else {
                            reData += txtR.value + "|";
                        }
                    }
                }
            }

            return false;
        }
       
        //删除行
        function deleRow() {
            //获得行索引
            //两个parentElement分别是TD和TR哟，rowIndex是TR的属性
            var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex;
            ctl00_ContentPlaceHolder1_tbl1.deleteRow(cGetRow);
            return false;
        }
        //判断字符是否为整数
        function isInt(str) {
            var reg = /^(-|/+)?/d+$/;
            return reg.test(str);
        }
        //判断字符是否为浮点类型或整数
        function isFloat(str) {
            if (isInt(str)) {
                return true;
            }
            var reg = /^(-|/+)?/d+/./d*$/;
            return reg.test(str);
        }
    </script>

 

《JS代码结束》