JS动态添加table的行及列的方法，结合.NET的GridView控件

1.前段的GridView代码

 <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="False" CssClass="grid"
                        OnRowDataBound="gvList_RowDataBound">
                        <Columns>
                           <asp:TemplateField HeaderText="选择文件">
                                <ItemTemplate>
                                    <input id="flFile" type="file"  runat="server" name="flFile" style=" 520px"/>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" Width="20%"></ItemStyle>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                        <input type="button" id="btnAdd" runat="server" class="btnS" value="增加文件" onclick="addRow()" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                        <input type="button" id="btnDel" runat="server" class="btnS" value="删除" onclick="removeRow(this)"/>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" Width="12%"></ItemStyle>
                            </asp:TemplateField>
                        </Columns>
                        <EmptyDataTemplate>
                            <div class="tip">
                                暂无记录！</div>
                        </EmptyDataTemplate>
                    </asp:GridView> 

//JS添加新的文件选择框
        function addRow() {
            var gvList = document.getElementById("<%=gvList.ClientID%>");
            if (gvList == null) {
                return;
            }
            var dr = gvList.insertRow(gvList.rows.length);
            dr.runnat = "server";
            var cell = dr.insertCell(0);
            cell.innerHTML = "<input name=\"flFile\" type=\"file\" id=\"flFile\" style=\" 520px\"/>";
            cell.width = "60%";
            cell = dr.insertCell(1);
            cell.innerHTML = "<input name=\"btnDel\" type=\"button\" id=\"btnDel\" class=\"btnS\" value=\"删除\" onclick=\"removeRow(this)\"/>";
            cell.align = "middle";
            cell.width = "40%";
        }

        //JS删除添加的文本框
        function removeRow(obj) {
            if(confirm("确定要删除吗？")) {
                var gvList = document.getElementById("<%=gvList.ClientID%>");
                if (gvList == null) {
                    return;
                }
                var index = obj.parentElement.parentElement.rowIndex;
                gvList.deleteRow(index);
            }
            else {
                return;
            }
           
        }

        function AddNewRow(tabId) {
            var tb = document.getElementById(tabId);
            var newRow;
            if (tb.rows[1]) {
                newRow = tb.rows[1].cloneNode(true);
            }
            else {
                newRow = document.createElement("tr");
                newRow.appendChild(document.getElementById("td"));
            }
            newRow.style.display = "block";
            tb.rows[0].parentElement.appendChild(newRow);
        }

        //删除行
        function DeleteRow(tabId, row) {
            var tb = document.getElementById(tabId);
            while (row != null && row.tagName != "TR")
                row = row.parentNode;
            if (tb.rows.length > 1) {
                if (row != null && row.parentNode != null)
                    row.parentNode.removeChild(row);
            }
        }

//后台的CS代码中在load的时候需要对默认的控件做一个绑定，不然不会自动加载文本选择控件

 #region 获取默认的列表
        /// <summary>
        /// 绑定字段对象列表
        /// </summary>
        private void BindDataList()
        {
            this.gvList.DataSource = this.GetDataTable();
            this.gvList.DataBind();
        }

        /// <summary>
        /// 构造数据表
        /// </summary>
        /// <returns></returns>
        private DataTable GetDataTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("File"));
            dt.Columns.Add(new DataColumn("FileLen"));
            for (int i = 0; i < 1; i++)//默认为1行
            {
                DataRow row = dt.NewRow();
                row["File"] = string.Empty;
                row["FileLen"] = string.Empty;
                dt.Rows.Add(row);
            }
            return dt;
        }

        #endregion

//在前台用jQuery获取网页中所有的file控件，并取出用户添加的文件路径
            $("#btnSave,#btnSubmit").click(function() {
                $("#hdfEleValid").val(""); //清空验证　　

　　　　     var $files = $(":file"); //获取gvList控件下面的选择框
                var filePaths = "";
                var result;
                $files.each(function(index) {
                    filePath = $(this).val();
                    if (filePath != "") {
                        //选择了附件信息
                        var fileFormat = filePath.substring(filePath.lastIndexOf('.'), filePath.length).toUpperCase(); //取得选择的文件的格式
                        if (fileFormat == ".PDF" || fileFormat == ".JPG") {
                            filePaths = filePaths + filePath + "|";
                            return true;
                        }
                        else {
                            alert("只能上传PDF或JPG格式的文件！");
                            filePaths = ""; //所有文件路径清空
                            $("#hdfEleValid").val("Y");
                            return false;
                        }

                    }
                });

                $("#hdfFileName").val(filePaths.substring(0, filePaths.length - 1)); //将选择的文件路径放在一个隐藏的字段中
                return;
            });