文章参考：文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html

效果：

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="rptTest.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></title>

</head>

<body>

    <form id="form1" runat="server">

    <div class="dataTable" >

        <asp:HiddenField ID="hfRptColumns" runat="server" Value="receiver,expense_amount,cut_payment_amount,acutal_amount,bank_no,bank_name" />

        <table cellpadding="" cellspacing="" border="" style=" width:800px">

            <thead>

                <tr>

                    <th></th>

                    <th >

                        序号

                    </th>

                    <th>

                        收款人

                    </th>

                    <th>

                        报销金额

                    </th>

                    <th>

                        扣款金额

                    </th>

                    <th>

                        实付金额

                    </th>

                    <th>

                        银行账号

                    </th>

                    <th>

                        开户行

                    </th>

                </tr>

            </thead>

            <tbody>

                <asp:Repeater ID="rptTest" runat="server">

                    <ItemTemplate>

                        <tr>

                            <td><asp:CheckBox runat="server" ID="ckBox" /></td>

                            <td><%# Container.ItemIndex+ %></td>

                            <td><asp:Label ID="lblReceiver" runat="server" Text='<%#Eval("receiver") %>'></asp:Label></td>

                            <td><asp:TextBox ID="txtExpenseAmount" runat="server" Text='<%#Eval("expense_amount") %>'></asp:TextBox></td>

                            <td><asp:TextBox ID="txtCutPaymentAmount" runat="server" Text='<%#Eval("cut_payment_amount") %>'></asp:TextBox></td>

                            <td><asp:Label ID="lblAcutalAmount" runat="server" Text='<%#Eval("acutal_amount") %>'></asp:Label></td>

                            <td><asp:Label ID="lblBankNo" runat="server" Text='<%#Eval("bank_no") %>'></asp:Label></td>

                            <td><asp:Label ID="lblBankName" runat="server" Text='<%#Eval("bank_name") %>'></asp:Label></td>

                        </tr>

                    </ItemTemplate>

                </asp:Repeater>

            </tbody>

        </table>

        <div>

            <asp:Button ID="btnAddNewRow" runat="server" OnClick="btnAddNewRow_Click" Text="添加一行" />

            <asp:Button ID="btnDel" runat="server" Text="删除选中行" onclick="btnDel_Click" />

        </div>

    </div>

    </form>

</body>

</html>

后台代码：

添加一行：

protected void btnAddNewRow_Click(object sender, EventArgs e)

        {

            //首先，恢复数据源

            DataTable dt = DefineDataTableSchema(hfRptColumns.Value);

            foreach (RepeaterItem item in rptTest.Items)

            {

                DataRow newRow = dt.NewRow();

                newRow["receiver"] = ((Label)item.FindControl("lblReceiver")).Text;

                newRow["expense_amount"] = ((TextBox)item.FindControl("txtExpenseAmount")).Text;

                newRow["cut_payment_amount"] = ((TextBox)item.FindControl("txtCutPaymentAmount")).Text;

                newRow["acutal_amount"] = ((Label)item.FindControl("lblAcutalAmount")).Text;

                newRow["bank_no"] = ((Label)item.FindControl("lblBankNo")).Text;

                newRow["bank_name"] = ((Label)item.FindControl("lblBankName")).Text;

                dt.Rows.Add(newRow);

            }

            //添加一行

            DataRow row = dt.NewRow();

            dt.Rows.Add(row);

            rptTest.DataSource = dt;

            rptTest.DataBind();

        }

删除一行

protected void btnDel_Click(object sender, EventArgs e)

        {

            var arr = new System.Collections.ArrayList();

            DataTable dt = DefineDataTableSchema(hfRptColumns.Value);

            foreach (RepeaterItem item in rptTest.Items)

            {

                var chk = item.FindControl("ckBox") as CheckBox;

                if (chk.Checked) continue;

                DataRow newRow = dt.NewRow();

                newRow["receiver"] = ((Label)item.FindControl("lblReceiver")).Text;

                newRow["expense_amount"] = ((TextBox)item.FindControl("txtExpenseAmount")).Text;

                newRow["cut_payment_amount"] = ((TextBox)item.FindControl("txtCutPaymentAmount")).Text;

                newRow["acutal_amount"] = ((Label)item.FindControl("lblAcutalAmount")).Text;

                newRow["bank_no"] = ((Label)item.FindControl("lblBankNo")).Text;

                newRow["bank_name"] = ((Label)item.FindControl("lblBankName")).Text;

                dt.Rows.Add(newRow);

            }

            rptTest.DataSource = dt;

            rptTest.DataBind();

        }

因为Repeater是服务端控件，所以用它动态增加或删除一行会刷新页面。用户体验远没有用 knockoutjs 绑定的效果好

附：代码下载

Repeater 动态增加删除一行的更多相关文章

  1. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  2. Hadoop 2.6.3动态增加/删除DataNode节点

    假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...

  3. jquery动态加入删除一行数据

    <html> <head> <title>加入.删除一行</title> <meta http-equiv="content-type& ...

  4. wpf动态增加删除控件

    我在xaml中定义了一个名字为morepictureWrapPan为WrapPanel,然后将控件添加在此WrapPanel中.由于要实现控件的删除功能,所以增加的textbox和button的名字都 ...

  5. jquery validate 动态增加删除验证规则（转载）

    页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, eleme ...

  6. jquery validate 动态增加删除验证规则

    增加规则示例: $('.class').rules('add',{ required: true, messages:{ required: '这是必填,请填写', } }); 删除规则示例: $(' ...

  7. table动态增加删除

    基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...

  8. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

  9. MVC中用jQuery加BootStrap实现动态增加删除文本输入框！

    http://www.freejs.net/article_biaodan_278.html 这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆. 修改后效果如下 @model ...

随机推荐

  1. SQL语句 DML,DDL,DCL(转载)

    数据控制语言(DCL)是用来设置或者更改数据库用户或角色权限的语句,这些语句包括GRANT.DENY.REVOKE等语句,在默认状态下,只有 sysadmin.dbcreator.db_owner或d ...

  2. java基础（二十二）线程

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  3. HDOJ/HDU 5686 Problem B(斐波拉契+大数~)

    Problem Description 度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个新的序列.对于给定的一个全1序列,请计算根据以上方法,可以构成多少种 ...

  4. std::move()和std::forward()

    std::move(t)负责将t的类型转换为右值引用,这种功能很有用,可以用在swap中,也可以用来解决完美转发. std::move()的源码如下 template<class _Ty> ...

  5. It appears as though you do not have permission to view information for any of the services you requested

  6. Android下的Linux指令集

    Android目录结构 data app:用户安装的应用 data:应用的专属文件夹 system:系统的配置信息,注册表文件 anr:anr异常的记录信息 dev:devices的缩写 存放设备所对 ...

  7. Java反射_JDBC操作数据

    </pre><p>使用反射 来操作  这里是练习反射的使用</p><p>链接数据库工具类</p><p><pre name= ...

  8. myeclipes使用过程中的错误解决方案

    1.‘Building workspace’ has encountered a problem. Errors occurred during the build. 解决方案:这样的错误,主要是由于 ...

  9. leetcode 题解 ||　Swap Nodes in Pairs 问题

    problem: Given a linked list, swap every two adjacent nodes and return its head. For example, Given ...

  10. Python介绍、环境搭建(Eclipse插件)、第一个程序

    Python介绍 特点 优雅.明白.简单. 适合领域 1. Web站点和各种网络服务 2. 系统工具和脚本 3. 作为"胶水"语言把其它语言开发的模块包装起来方便使用 和其它语言对 ...