jquery(javascript)自动序列编号和属性编号实现代码

自动序列编号和自动属性编号，效果图如下：

实现原理：
添加和删除是逆向过程，实现是一致的。
增加时，向父容器中增加元素append方法，并将所有的自定义属性编号和序列编号设置为空，然后通过$.each方法，重新为自定义属性编号和序列编号赋值。


代码如下:

$.each(items, function (k, v) {
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});

删除时，为所有删除按钮绑定事件live方法，将元素从父容器中删除detach方法，并将所有的自定义属性编号和序列编号设置为空，然后通过$.each方法，重新为自定义属性编号和序列编号赋值。


代码如下:

$("#test .del").live("click", function () { //为删除按钮绑定点击事件
var dels = test.find(".del"); //所有所删除按钮
var delnum = dels.index($(this)); //当前删除按钮的索引值
var items = test.find(".item");
items.eq(delnum).detach(); //从父容器中将此节点删除
items.attr("opt", "");
var serials = test.find(".serial");
serials.html("");
$.each(items, function (k, v) { //自定义属性重新和编号赋值
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
});

示例如下：

each和live实现自动编号

*{margin: 0px;padding: 0px;}
.cont{width:600px; margin:60px auto 0px;}
#test .item{padding: 10px 6px;border-bottom: 1px solid #666666;}
#test .serial{margin-right: 20px;}
#test .del{padding: 6px;margin-left: 30px;}

$(function () {
var num = 1;
var test = $("#test");
$("#btn").click(function () {
test.append("

aaaaa" + num + "删除

");
var items = test.find(".item");
var serials = test.find(".serial");
items.attr("opt", "");
serials.html("");
$.each(items, function (k, v) {
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
num++;
});

$("#test .del").live("click", function () {
var dels = test.find(".del");
var delnum = dels.index($(this));
var items = test.find(".item");
items.eq(delnum).detach();
items.attr("opt", "");
var serials = test.find(".serial");
serials.html("");
$.each(items, function (k, v) {
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
});
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript GUID生成器实现代码

    /jslib/other/IntUtil_post.js大家先把上面的代码保存到本地.保存为IntUtil_post.js测试代码: 复制代码 代码如下: <script language="javascript" src="IntUtil_post.js"></script> <script language="javascript"> <!-- alert($System.Math.IntUtil.g

  • js之弹出式窗口代码生成器

    弹出式窗口代码生成器 要完成此效果把如下代码加入到区域中 -1){ space=txt.indexOf(wrd); txt=txt.substring(0,space)+smut+txt.substring((space+wrdl),txt.length);} smut=">"; replacewords="> "; space=replacewords.indexOf(" "); wrd=replacewords.substring

  • JavaScript中的迭代器和生成器详解

    处理集合里的每一项是一个非常普通的操作,JavaScript提供了许多方法来迭代一个集合,从简单的for和for each循环到 map(),filter() 和 array comprehensions(数组推导式).在JavaScript 1.7中,迭代器和生成器在JavaScript核心语法中带来了新的迭代机制,而且还提供了定制 for-in 和 for each 循环行为的机制. 迭代器 迭代器是一个每次访问集合序列中一个元素的对象,并跟踪该序列中迭代的当前位置.在JavaScript中

  • js jquery获取随机生成id的服务器控件的三种方法

    由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("input[id*=txtUserID]&qu

  • javascript 动态生成私有变量访问器

    复制代码 代码如下: //创建一个新的用户对象,接受一个有许多属性的对象作为参数 function User(properties) { //遍历该对象的所有属性,并保证其作用域正确 for(var i in properties){ (function(which){ var p=i; //创建此属性的一个新的读取器(getter) which["get"+p]=function(){ return properties[p]; }; //创建此属性的一个新的设置器(setter)

  • JS简单编号生成器实现方法(附demo源码下载)

    JS简单编号生成器实现方法(附demo源码下载)

    本文实例讲述了JS简单编号生成器实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>编号生成器</title> </head> <body&g

  • EditPlus注册码生成器(js代码实现)

    EditPlus注册码生成器(js代码实现)

    今天同事惊奇的告诉我,说找到个在线的EditPlus注册码生成器,我赶紧去看了看,还真是,在这里. exe的注册机病毒太多,纯js的在线注册机可就放心了. 作者是从别人的注册机反汇编然后找出算法的,更令我惊奇的是,这作者Demon竟然是搞法律的,才刚拿到法律职业资格证书,佩服. 主要的一个js函数是这样的: 复制代码 代码如下: function generate_editplus_regcode(username){ var list = [0,49345,49537,320,49921,96

  • 用js实现的一个Flash滚动轮换显示图片代码生成器

    复制代码 代码如下: <!--文件头模板--> <SCRIPT src=top.js></SCRIPT> <SCRIPT language=javascript>     writeTop('Flash滚动显示图片代码生成','2006-10-18'); </SCRIPT> <!--以下为内容--> <SCRIPT> //运行代码 function runEx(cod1)  {      cod=document.getE

  • javascript实现的鼠标链接提示效果生成器代码

    链接注释   演 示 源 代 码   效果演示"+form.body.value+""; txt=""+form.a.value+""+form.b.value+""+form.c.value+""; txt+=""+form.d.value+""+form.e.value+""+form.f.value+""; tx

  • jquery(javascript)自动序列编号和属性编号实现代码

    jquery(javascript)自动序列编号和属性编号实现代码

    自动序列编号和自动属性编号,效果图如下:实现原理: 添加和删除是逆向过程,实现是一致的. 增加时,向父容器中增加元素append方法,并将所有的自定义属性编号和序列编号设置为空,然后通过$.each方法,重新为自定义属性编号和序列编号赋值. 复制代码 代码如下: $.each(items, function (k, v) { $(this).attr("opt", "mopt" + k); serials.eq(k).html(k); }); 删除时,为所有删除按钮

  • asp(JavaScript)自动判断网页编码并转换的代码

    完整的示例代码如下: 复制代码 代码如下: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript自动判断网页编码并转换</titl

  • Javascript获取CSS伪元素属性的实现代码

    CSS伪元素非常强大,它经常被用来创建CSS三角形提示,使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签.有一点就是Javascript无法获取到这些CSS属性值,但现在有一种方法可以获取到: 看看下面的CSS代码: .element:before { content: 'NEW'; color: rgb(255, 0, 0); }.element:before { content: 'NEW'; color: rgb(255, 0, 0); } 为了获取到.element

  • 用javascript获得css中的属性值的代码

    .divs{ border: 1px #000000 solid; width:100px; height:100px } alert(document.getElementById("xx").currentStyle.borderWidth); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】

    本文实例讲述了JavaScript实现的自动生成 年月范围 选择功能.分享给大家供大家参考,具体如下: 近日做项目涉及到日期选择,为了用户界面友好,于是加入了一年内的年月段的查询功能,先看效果 会自动判断当前年份 以下为html代码 其中用到了 Jquery 和 struts 标签 但是这两个都不是重要的 主要书 用于赋值 和 取值方便 还用到了 WdatePicker 插件进行具体日期选择 <%@ page language="java" import="java.u

  • jQuery查找节点并获取节点属性的方法

    jQuery查找节点并获取节点属性的方法

    本文实例讲述了jQuery查找节点并获取节点属性的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jqu

  • JavaScript 自动完成脚本整理(33个)

    如果你也正准备在这方面提升自己网站的用户体验,下面为你准备了33个JavaScript自动完成脚本,当然还包括用Jquery实现的.1. Proto!TextboxList (演示地址)=700) window.open('/upload/20091020155954866.jpg');" src="http://files.jb51.net/upload/20091020155954866.jpg" onload="if(this.offsetWidth>'

  • jQuery javascript获得网页的高度与宽度的实现代码

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: document.b

  • jQuery实现自动输入email、时间和域名的方法

    jQuery实现自动输入email、时间和域名的方法

    本文实例讲述了jQuery实现自动输入email.时间和域名的方法.分享给大家供大家参考,具体如下: <!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"&

  • jQuery实现自动切换播放的经典滑动门效果

    jQuery实现自动切换播放的经典滑动门效果

    本文实例讲述了jQuery实现自动切换播放的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换[播放]滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/ 具体代码如下: <!

随机推荐