很多时候，我们需要可编辑的表格，来比较方便的进行数据的录入，比如学习成绩的录入。当然这就要求能够动态的增加行，来一次性录入多个学生的信息。现在用ASP.NET中强大的GridView控件就能够达到这样的效果，如下图：

下面是具体实现

前台代码：

<%@ 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" onclick="SelectAll(this)"/>

                    </HeaderTemplate>

                    <ItemTemplate>

                        <input id="chkRow" type="checkbox" onclick="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>

后台代码：

protectedvoid 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();

        }

    }

    protectedvoid 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;

    }

    protectedvoid 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();

    }