jquery(javascript)自動(dòng)序列編號(hào)和屬性編號(hào)實(shí)現(xiàn)代碼
更新時(shí)間：2012年07月07日 01:51:30 作者：
jquery(javascript)自動(dòng)序列編號(hào)和屬性編號(hào)實(shí)現(xiàn)代碼，需要的朋友可以參考下
自動(dòng)序列編號(hào)和自動(dòng)屬性編號(hào)，效果圖如下：
實(shí)現(xiàn)原理：
添加和刪除是逆向過(guò)程，實(shí)現(xiàn)是一致的。
增加時(shí)，向父容器中增加元素append方法，并將所有的自定義屬性編號(hào)和序列編號(hào)設(shè)置為空，然后通過(guò)$.each方法，重新為自定義屬性編號(hào)和序列編號(hào)賦值。
復(fù)制代碼 代碼如下:
$.each(items, function (k, v) {
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
刪除時(shí)，為所有刪除按鈕綁定事件live方法，將元素從父容器中刪除detach方法，并將所有的自定義屬性編號(hào)和序列編號(hào)設(shè)置為空，然后通過(guò)$.each方法，重新為自定義屬性編號(hào)和序列編號(hào)賦值。
復(fù)制代碼 代碼如下:
$("#test .del").live("click", function () { //為刪除按鈕綁定點(diǎn)擊事件
var dels = test.find(".del"); //所有所刪除按鈕
var delnum = dels.index($(this)); //當(dāng)前刪除按鈕的索引值
var items = test.find(".item");
items.eq(delnum).detach(); //從父容器中將此節(jié)點(diǎn)刪除
items.attr("opt", "");
var serials = test.find(".serial");
serials.html("");
$.each(items, function (k, v) { //自定義屬性重新和編號(hào)賦值
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
});
示例如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- JavaScript中的迭代器和生成器詳解
- js jquery獲取隨機(jī)生成id的服務(wù)器控件的三種方法
- EditPlus注冊(cè)碼生成器(js代碼實(shí)現(xiàn))
- javascript 動(dòng)態(tài)生成私有變量訪問(wèn)器
- javascript GUID生成器實(shí)現(xiàn)代碼
- js之彈出式窗口代碼生成器
- javascript實(shí)現(xiàn)的鼠標(biāo)鏈接提示效果生成器代碼
- 用js實(shí)現(xiàn)的一個(gè)Flash滾動(dòng)輪換顯示圖片代碼生成器
- JS簡(jiǎn)單編號(hào)生成器實(shí)現(xiàn)方法(附demo源碼下載)
相關(guān)文章
jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果，菜單鼠標(biāo)懸停出現(xiàn)下劃線，向兩邊擴(kuò)展的效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
合并table相同單元格的jquery插件分享(很精簡(jiǎn))
正好項(xiàng)目中有個(gè)小需求, 要求把表格指定列中內(nèi)容相同的單元格進(jìn)行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個(gè)數(shù), 然后給第一個(gè)與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解2011-06-06
這篇文章主要介紹了jQuery中parent()方法用法,實(shí)例分析了parent()方法的功能、定義及取得緊鄰父元素的使用技巧,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法,涉及jQuery事件綁定及頁(yè)面元素屬性動(dòng)態(tài)獲取與操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
學(xué)習(xí)從實(shí)踐開(kāi)始之jQuery插件開(kāi)發(fā) 菜單插件開(kāi)發(fā)
從軟件到網(wǎng)站，菜單可以說(shuō)是無(wú)處不在。在傳統(tǒng)應(yīng)用軟件開(kāi)發(fā)中，一般都有現(xiàn)成的控件可以使用；但是在網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，基本上要靠開(kāi)發(fā)人員自己動(dòng)手設(shè)計(jì)2012-05-05
在使用discuzx中有一個(gè)Message以及Dialog方法來(lái)顯示信息對(duì)話框。今天寫(xiě)項(xiàng)目的時(shí)候，需要一個(gè)信息對(duì)話框，所以就著手利用lightbox_me插件來(lái)寫(xiě)一個(gè)做備用。2015-04-04
基于Jquery+Ajax+Json的高效分頁(yè)實(shí)現(xiàn)代碼
分頁(yè)我相信大家存儲(chǔ)過(guò)程分頁(yè)已經(jīng)很熟悉了，ajax更是耳熟能詳了，更別說(shuō)我們的json，等等2011-10-10
jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01