【原创分享】动态新增行和删除行

由于工作的一个小需求,来写一写这个很小,但是新手朋友可能会有些迷惑的功能

记得刚工作的时候做过一个类似的功能,但是的思路不太记得了,只记得很乱,测出各种bug。

今天来看一下这次的思路,比较适合新手朋友,没有很多的jquery父子级关系

先看一下大概的界面

实现的就是点击新增一行会新增一条空白行,点击删除将这行删除,点击保存将信息保存

校验方面做得比较简单,只是标红不让提交

1。
先看一下 初始页面的主要代码

是不是很简单,初始化的页面 只有一条单独的空行和两个按钮外加两个隐藏域

这个小功能,唯一的迷惑可能就是增加多条后从中间删除,会造成数据的错乱。

在这里我是这么处理的,记录了一个初始化的max最大值隐藏域,默认给0。然后添加一行将这个值加一,删除不便,这样可以保证生成的动态id唯一且比较好做默认排序的效果。

由于这个需求是在最后新增一行,所以比较简单。 如果有同学要做在特定行下新增,除了id不重复还需要考虑一下排序的问题。

下面就看一下 新增的js代码

以上就是新增行和删除特定行的js,是不是很简单。

2。新增保存操作

由于业务需求保存前做了一些校验不详说,只是传递数据

这里其实有很多办法json,列表等等。我是比较懒。自己按自己的规则拼接了字符串来传递,到业务处理的地方再解析取出,仅供大家参考下

先看解析数据的代码,将行的id传递进方法

保存方法没什么好说,有一个不启用的功能在这里处理一下,剩下就是传递数据去后台处理再返回结果

剩下就是后台入库那些啦,很简单对不对,然后就是如果这个功能需要修改的时候 还存在一个回显得功能,来看一下

3。 修改回显操作

其实上面的保存方法已经满足了修改的要求,那么问题只剩下一个就是回显

这里有几点  1。由于是共用的页面,所以在初始化数据之前将span0的原有空行删除

2。新循环生成的新行,id和原来的一样,这样在后台取数据的时候注意下排序

3。由于id是原来保存的,而新打开页面中我们的标记max还是0,所以在数据加载的同时要将max算出,并放回到隐藏域中。

这样这个小功能就基本完成啦。

欢迎大家交流,共同学习,希望给新人一点启示,高手别劈我  哈哈 。

文章为原创 发布在 http://techfoxbbs.com/thread-21638-1-1.html
也欢迎大家 关注公众号 TechFoxBBS ,一起交流学习

转载 请标明出处

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-31 19:34:59

【原创分享】动态新增行和删除行的相关文章

Jquery动态增加行和删除行

$("#add_5").click(function(){ var str_1="<tr> <td><input type=\"text\" placeholder=\"商品名称\" class=\"reg_input mput\"> </td>" + " <td> <label class=\"radio\"&

对Table的操作(赋值、动态新增行、删除行、保存table中多行数据对象

一.成品界面: 二.功能点描述 从后台传list对象,前台table展示. 可添加行操作,新增或者删除行. 三.源码: Form表单: <form id="reportForm" method="post"> <table class="table-grid table-list" cellpadding="1" cellspacing="1" id="reportTable&q

原创分享单臂路由课堂笔记

原创分享北京北大青鸟单臂路由课堂笔记 1.单臂路由:不同vlan之间通讯 2.单臂路由概念: 子接口(把路由器的物理接口逻辑上划分成多个子接口) (子接口作为vlan的网关) 单臂路由链路类型:接入access链路(交换机和主机之间是接入链路);中继trunk链路(交换机和交换机之间.交换机和路由器之间配置成中继链路) 3.单臂路由工作过程:源客户端发送正常数据帧给交换机,交换机查看源vlan并进行源vlan封装,把数据传输给路由器,路由器查看目标IP地址,把源vlan标签封装为目标vlan标签

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li

【原创分享&#183;微信支付】 C# 微信支付教程系列之扫码支付

微信支付教程系列之扫码支付 今天,我们来一起探讨一下这个微信扫码支付.何为扫码支付呢?这里面,扫的码就是二维码了,就是我们经常扫一扫的那种二维码图片,例如,我们自己添加好友的时候,可以通过输入对方的微信号,也可以扫一扫对方的二维码.扫码支付,作为,微信支付里面,不可或缺的一个功能,对商品的支付提供了极为方便的体验,用途也非常的多.例如我们在地铁.公交站常见的那些自动售货机(不错,就是那种投硬币,就可以自动出货的那种机器)中都用到.以前,那种机器,只能通过投硬币或者纸币,但是,这里面也有一定的风险

js 动态增加行删除行

1 <body> 2 <table id="tableID" border="1" align="center" width="60%"> 3 <tr> 4 <th>用户名</th> 5 <th>邮箱</th> 6 <th>操作</th> 7 </tr> 8 <tbody id="tbodyI

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c

Android无线开发的几种常用技术(阿里巴巴资深工程师原创分享)

本文由阿里巴巴移动安全客户端.YunOS资深工程师Hao(嵌入式企鹅圈原创团队成员)撰写,是Hao在嵌入式企鹅圈发表的第一篇原创文章,对Android无线开发的几种常用技术进行综述. 嵌入式企鹅圈现拥有七个专栏(Linux内核驱动情景分析.资源紧缺型SOC嵌入式架构设计.嵌入式交叉工具链及其应用.嵌入式设计和编程.微信硬件平台和物联网解决方案.Android开发.开发资源共享).更多Android.Linux.嵌入式和物联网原创技术分享敬请关注微信公众号:嵌入式企鹅圈.我们百分百原创,资深工程师