很多时候，我们需要可编辑的表格，来比较方便的进行数据的录入，比如学习成绩的录入。当然这就要求能够动态的增加行，来一次性录入多个学生的信息。现在用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();
}
http://www.cnblogs.com/psforever/archive/2011/02/23/1963207.html
http://blog.csdn.net/qbook/article/details/8191002
http://www.cnblogs.com/hfliyi/archive/2011/05/18/2050164.html
GridView动态增加行的更多相关文章
-
js 动态增加行删除行
<body> <table id="tableID" border="1" align="center" width=&q ...
-
JQuery实现表格动态增加行并对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
-
JQUERY方法给TABLE动态增加行
比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab&q ...
-
C#点击按钮用DataGridView动态增加行、删除行，增加按钮列
原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...
-
poi读取Excel模板并修改模板内容与动态的增加行
有时候我们可能遇到相当复杂的excel,比如表头的合并等操作,一种简单的方式就是直接代码合并(浪费时间),另一种就是写好模板,动态的向模板中增加行和修改指定单元格数据. 1.一个简单的根据模板shee ...
-
JQuery实现表格自动增加行，对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
-
jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
-
JavaScript动态增删改表格数据
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
-
jquery plugins —— datatables 增加行号
table = $("#Table").DataTable({ "rowCallback": function (row, data, dataIndex) { ...
随机推荐
-
permission denied to create extension ";hstore";解决方案
首先 sudo -u postgres psql postgres 进入数据库后输入命令 ALTER USER mydb_user WITH SUPERUSER; (把某个用户设置为超级 ...
-
jquery常用方法
一.多个按钮绑定同一事件 $("#index_svip,#index_svip_renew").click(function() { seajs.use(['svipLayer'] ...
-
iOS后台定位实现
iOS后台定位实现 (2013-01-24 16:43:12) 工作中碰到一个定位的应用场景:app需要在后台运行,实时上传用户地理位置. 苹果对iOS的规范性在提升了app的品质的同时也 ...
-
Hibernate 只获取外键id，不获取内容
Hibernate,jpa注解映射中 A多对一B A的表中有B的外键. 如果想只获取A表中的B的外键而不想发送查询B的sql语句. 那么: @ManyToOne(fetch=FetchType.LAZ ...
-
《剑指offer》数组中出现一半次数的数字
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
-
MSSQL 漏洞利用与提权
1.SA口令的获取 webshell或源代码的获取 源代码泄露 嗅探(用CAIN等工具嗅探1433数据库端口) 口令暴力破解 2.常见SQL server 提权命令 查看数据库的版本(select @ ...
-
(并发编程)全局解释器锁（GIL）-----有了GIL不用给线程加锁了？
一.全局解释器锁 (GIL)运行test.py的流程:a.将python解释器的代码从硬盘读入内存b.将test.py的代码从硬盘读入内存 (一个进程内装有两份代码---一份cpython解释器代码 ...
-
Docker 推送镜像到 阿里Docker镜像
登录 阿里云Docker镜像 https://cr.console.aliyun.com 创建一个镜像 成功之后点击 “管理” 阿里有详细的 使用说明 PS : 注意的地方是 sudo docker ...
-
小y的质数
题目链接:https://ac.nowcoder.com/acm/contest/634/C 链接:https://ac.nowcoder.com/acm/contest/634/C来源:牛客网 题目 ...
-
C# dynamic json
对应普通对象,写个扩展方法,ToJson蛮方便. 但是 dynamic 类型就不行了,因为是运行时解析,只能转换为强类型 IDictionary<string, object> 才可以. ...