jquery(javascript)自動(dòng)序列編號和屬性編號實(shí)現(xiàn)代碼
更新時(shí)間：2012年07月07日 01:51:30 作者：
jquery(javascript)自動(dòng)序列編號和屬性編號實(shí)現(xiàn)代碼，需要的朋友可以參考下
自動(dòng)序列編號和自動(dòng)屬性編號，效果圖如下：
實(shí)現(xiàn)原理：
添加和刪除是逆向過程，實(shí)現(xiàn)是一致的。
增加時(shí)，向父容器中增加元素append方法，并將所有的自定義屬性編號和序列編號設(shè)置為空，然后通過$.each方法，重新為自定義屬性編號和序列編號賦值。
復(fù)制代碼 代碼如下:
$.each(items, function (k, v) {
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
刪除時(shí)，為所有刪除按鈕綁定事件live方法，將元素從父容器中刪除detach方法，并將所有的自定義屬性編號和序列編號設(shè)置為空，然后通過$.each方法，重新為自定義屬性編號和序列編號賦值。
復(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) { //自定義屬性重新和編號賦值
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
});
示例如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
相關(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
正好項(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事件綁定及頁面元素屬性動(dòng)態(tài)獲取與操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
學(xué)習(xí)從實(shí)踐開始之jQuery插件開發(fā) 菜單插件開發(fā)
從軟件到網(wǎng)站，菜單可以說是無處不在。在傳統(tǒng)應(yīng)用軟件開發(fā)中，一般都有現(xiàn)成的控件可以使用；但是在網(wǎng)頁開發(fā)時(shí)，基本上要靠開發(fā)人員自己動(dòng)手設(shè)計(jì)2012-05-05
在使用discuzx中有一個(gè)Message以及Dialog方法來顯示信息對話框。今天寫項(xiàng)目的時(shí)候，需要一個(gè)信息對話框，所以就著手利用lightbox_me插件來寫一個(gè)做備用。2015-04-04
基于Jquery+Ajax+Json的高效分頁實(shí)現(xiàn)代碼
分頁我相信大家存儲過程分頁已經(jīng)很熟悉了，ajax更是耳熟能詳了，更別說我們的json，等等2011-10-10
jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery ajax實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01