GridView动态增加行-CSDN博客

本文链接：https://blog.csdn.net/iteye_15884/article/details/82619222
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>GridView中实现动态动态增加删除行</title>
    <style type="text/css">
        .hide{
            display:none;   
         }
    </style>
    <script type="text/javascript">
        //选中所有行
        function SelectAll(chkAll)
        {
            var gridview = document.getElementById("GridView1");
            if (gridview)
            {
               //获取到GridView1中的所有input标签
               var inputs = gridview.getElementsByTagName("input");
               for(var i=0;i<inputs.length;i++)
               {
                  if (inputs[i].type=="checkbox")
                  {
                     //设置所有checkbox的选中状态与chkAll一致
                     inputs[i].checked = chkAll.checked;
                  }
               }
            }
       }
      
       //给选中行换背景色
       function checkRow(chkRow)
       {
          var row = chkRow.parentNode.parentNode;
          if(row)
          { 
               if (chkRow.checked)
                   row.style.backgroundColor="#7799CC";
                else
                   row.style.backgroundColor="#FFFFFF";
           }
       } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <div>
       <asp:LinkButton ID="lbtnAddRow" runat="server" Width="80px" OnClick="lbtnAddRow_Click">添加行</asp:LinkButton>
      <asp:LinkButton ID="btnDeleteRow" runat="server" OnClick="btnDeleteRow_Click" OnClientClick="return confirm('确定要删除选中行吗？');">删除选中行</asp:LinkButton> 
   </div> 
    <div> 
        <asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" >
                    <ItemStyle CssClass="hide" BorderColor="#507CD1" />
                    <HeaderStyle CssClass="hide" />
                </asp:BoundField>
                <asp:TemplateField HeaderText="序号">
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1%>
                    </ItemTemplate>
                    <ItemStyle BorderColor="#507CD1" HorizontalAlign="Center" BorderWidth="1px" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                       <input id="chkAll" type="checkbox" οnclick="SelectAll(this)" />
                    </HeaderTemplate> 
                    <ItemTemplate>
                        <input id="chkRow" type="checkbox" οnclick="checkRow(this);" runat="server" />
                    </ItemTemplate>
                    <ItemStyle Width="30px" HorizontalAlign="Center" BorderColor="#507CD1" BorderWidth="1px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="姓名">
                    <ItemTemplate>
                        <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>' BorderStyle="None"></asp:TextBox>
                    </ItemTemplate>
                    <ItemStyle Width="100px" BorderColor="#507CD1" BorderWidth="1px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="平时成绩">
                    <ItemTemplate>
                        <asp:TextBox ID="txtUsuallyResults" runat="server" Text='<%# Bind("UsuallyResults") %>' BorderStyle="None"></asp:TextBox>
                    </ItemTemplate>
                    <ItemStyle Width="100px" BorderColor="#507CD1" BorderWidth="1px" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="考试成绩">
                    <ItemTemplate>
                        <asp:TextBox ID="txtExamResults" runat="server" Text='<%# Bind("ExamResults") %>' BorderStyle="None"></asp:TextBox>
                    </ItemTemplate>
                    <ItemStyle Width="100px" BorderColor="#507CD1" BorderWidth="1px" />
                </asp:TemplateField>
            </Columns>
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>


后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DataTable table = new DataTable();
            table.Columns.Add(new DataColumn("ID"));
            table.Columns.Add(new DataColumn("Name"));
            table.Columns.Add(new DataColumn("UsuallyResults"));
            table.Columns.Add(new DataColumn("ExamResults"));
            DataRow row = table.NewRow(); table.Rows.Add(row);
            GridView1.DataSource = table; GridView1.DataBind();
        }
    }
    protected void lbtnAddRow_Click(object sender, EventArgs e)
    {
        DataTable table = GetGridViewData();
        DataRow newRow = table.NewRow();
        newRow["ID"] = Guid.NewGuid().ToString();
        table.Rows.Add(newRow);
        GridView1.DataSource = table;
        GridView1.DataBind();
    }
    private DataTable GetGridViewData()
    {
        DataTable table = new DataTable();
        table.Columns.Add(new DataColumn("ID"));
        table.Columns.Add(new DataColumn("Name"));
        table.Columns.Add(new DataColumn("UsuallyResults"));
        table.Columns.Add(new DataColumn("ExamResults"));
        foreach (GridViewRow row in GridView1.Rows)
        {
            DataRow sourseRow = table.NewRow();
            sourseRow["ID"] = row.Cells[0].Text;
            sourseRow["Name"] = ((TextBox)row.Cells[3].FindControl("txtName")).Text;
            sourseRow["UsuallyResults"] = ((TextBox)row.Cells[4].FindControl("txtUsuallyResults")).Text;
            sourseRow["ExamResults"] = ((TextBox)row.Cells[5].FindControl("txtExamResults")).Text;
            table.Rows.Add(sourseRow);
        }
        return table;
    }
    protected void btnDeleteRow_Click(object sender, EventArgs e)
    {
        DataTable table = GetGridViewData();
        foreach (GridViewRow row in GridView1.Rows)
        {
            if (((HtmlInputCheckBox)row.Cells[2].FindControl("chkRow")).Checked)
            {
                foreach (DataRow dtRow in table.Rows)
                {
                    if (dtRow["ID"].ToString() == row.Cells[0].Text)
                    {
                        table.Rows.Remove(dtRow);
                        break;
                    }
                }
            }
        }
        GridView1.DataSource = table;
        GridView1.DataBind();
    }
}
很多时候，我们需要可编辑的表格，来比较方便的进行数据的录入，比如学习成绩的录入。当然这就要求能够动态的增加行，来一次性录入多个学生的信息。现在用ASP.NET中强大的GridView控件就能够达到这样的效果，如下图：
下面是具体实现