软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：序列编号,属性编号

<!DOCTYPE html> 
<html> 
<head> 
<title>each和live实现自动编号</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> 
<style type="text/css"> 
*{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;} 
</style> 
</head> 
<body> 
<div class="cont"> 
<input id="btn" type="button" value="增加" /> 
<div id="test"></div> 
</div> 
<script type="text/javascript"> 
$(function () { 
var num = 1; 
var test = $("#test"); 
$("#btn").click(function () { 
test.append("<div class=item><span class=serial></span>aaaaa" + num + "删除</div>"); 
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); 
}); 
}); 
}); 
</script> 
</body> 
</html>

技术文章快速查找

JavaScript 入门基础知识想学习js的朋友可以参考下

javascript 根据歌名获取播放地址和歌词内容

jQuery取得设置清空select选择的文本与值

JavaScript中“基本类型”之争小结

JS获取网页属性包括宽、高等等

jquery中邮箱地址 URL网站地址正则验证实例代码

JS关闭窗口或JS关闭页面的几种代码分享

js简单实现让文本框内容逐个字的显示出来

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建