JavaScript實作節點的刪除與序號重建實例_javascript技巧
本文实例讲述了JavaScript实现节点的删除与序号重建。分享给大家供大家参考。具体如下：
这里演示JavaScript节点的删除与重建方法，删除节点后，会自动重新建立节点，序号自动排列，比如删除当前的第3条数据后，第4条的序号会智能变为3，以此类推，保证序号不乱。
运行效果如下图所示：
删除前：
删除后：
具体代码如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点重建、示例代码</title>
<style type="text/css">
html{color:#000;background:#FFF;font-family:Arial, Helvetica, sans-serif;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
body{text-align:center;color:#000;}
a:link,a:visited,a:hover{text-decoration:none;color:#049;}
a:hover{text-decoration:underline;}
table{margin:30px auto;width:600px;border:1px solid #CDCDCD;}
thead{background-color:#F3F3F3;}
th,td{height:26px;line-height:26px;font-size:14px;text-align:center;}
.left{text-align:left;}
</style>
<base target="_blank" />
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="50">编号</th>
<th>标题</th>
<th width="50">操作</th>
</tr>
</thead>
<tbody id="reroder-list">
<tr>
<td>1</td>
<td class="left"><a href="http://www.jb51.net/article/70631.htm">JS+CSS实现表格高亮的方法</a></td>
<td><a href="#del" class="lnk-del">删除</a></td>
</tr>
<tr>
<td>2</td>
<td class="left"><a href="http://www.jb51.net/article/70625.htm">JavaScript节点及列表操作实例小结</a></td>
<td><a href="#del" class="lnk-del">删除</a></td>
</tr>
<tr>
<td>3</td>
<td class="left"> <a href="http://www.jb51.net/article/70613.htm">JavaScript实现删除,移动和复制文件的方法</a></td>
<td><a href="#del" class="lnk-del">删除</a></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var delAndReorder = function(root,rowTag,delTag,delClass,idTag){
var doc = document,
list = doc.getElementById(root || 'reroder-list');
if(!list){
return false;
}
var stopEvent = function(evt){
stopPropagation(evt);
preventDefault(evt);
},
stopPropagation = function(evt){
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
},
preventDefault = function(evt){
if (evt.preventDefault) {
evt.preventDefault();
}
else {
evt.returnValue = false;
}
},
hasClass = function(elem, className){
var has = new RegExp("(?:^|\\s+)" + className + "(?:\\s+|$)");
return has.test(elem.className);
},
byClass = function(tag,className,root){
var elems = [],
tempEl = root.getElementsByTagName(tag),
i,
len = tempEl.length;
for (i = 0; i < len; ++i) {
if (hasClass(tempEl[i], className)) {
elems.push(tempEl[i]);
}
}
if (elems.length < 1) {
return false;
}
else {
return elems;
}
},
firstTds = [],
rows = list.getElementsByTagName(rowTag || 'tr'),
delBtns = byClass((delTag || 'a'), (delClass || 'lnk-del'), list),
i = 0,
len = rows.length,
reorder = function(idx){
var i = idx, len = firstTds.length;
if(idx!==(len-1)){
for(;i<len;i+=1){
firstTds[i].innerHTML = i;
}
}
};
for (; i < len; i += 1) {
firstTds.push(rows[i].getElementsByTagName(idTag || 'td')[0]);
delBtns[i].onclick = function(idx){
return function(event){
var evt = event || window.event;
list.removeChild(rows[idx]);
reorder(idx);
delAndReorder();
stopEvent(evt);
};
}(i);
}
}
delAndReorder();
</script>
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
inetpub資料夾可以刪除嗎？快速刪除C盤inetpub資料夾的方法
Mar 13, 2024 pm 02:00 PM
電腦C盤發現有個inetpub資料夾佔用極大的內存，這個inetpub是什麼資料夾？可以直接刪除嗎？其實inetpub是IIS服務端的一個資料夾，IIS全名為InternetInformationServices，也就網路資訊服務，是可以搭建網站、調試網站用的，如果不需要的話，可以將其卸載掉。 具體方法如下： 1、右鍵點選開始選單，選擇「程式與功能」。 2、開啟後點選「啟用或關閉Windows功能」。 3、在Windows功能清單中，取消勾選II
小紅書筆記怎麼刪除
Mar 21, 2024 pm 08:12 PM
小紅書筆記怎麼刪除?在小紅書APP中是可以編輯筆記的，多數的用戶不知道小紅書筆記如何的刪除，接下來就是小編為用戶帶來的小紅書筆記刪除方法圖文教程，有興趣的用戶快來一起看看吧！小紅書使用教學小紅書筆記怎麼刪除1、先打開小紅書APP進入到主頁面，選擇右下角【我】進入到專區;2、之後在我的專區，點擊下圖所示的筆記頁面，選擇要刪除的筆記;3、進入到筆記頁面，右上角【三個點】;4、最後下方會展開功能欄，點選【刪除】即可完成。
found.000是什麼資料夾？ found.000資料夾可以刪除嗎？
Mar 13, 2024 pm 08:52 PM
日常使用電腦的過程中，可能會收到found.000檔案遺失損壞的錯誤提示，這個found.000是什麼資料夾？如果沒有用的話，可以刪除嗎？既然有這麼多人不認識這個文件，下面小編就來跟大家仔細說說found.000文件夾吧~ 一、found.000是什麼文件夾當電腦出現因非法關機導致的文件部分或全部丟失時，可以在位於系統分割區中指定目錄下找到名為「found.000」的特殊資料夾及其內部所包含的以「.chk」為副檔名的檔案。 這個「fo
微信拉黑再刪除永久加不上是真的嗎
Apr 08, 2024 am 11:41 AM
1.首先，拉黑再刪除永久加不上是假的，拉黑刪除後想要再加對方，只要對方同意即可。 2.如果用戶將某人封鎖，對方將無法向用戶發送訊息、查看用戶的朋友圈、與用戶通話。 3.封鎖並不意味著將對方從用戶的微信聯絡人清單中刪除。 4.如果用戶在封鎖後又將對方從用戶的微信聯絡人清單中刪除，那麼在刪除後是沒有辦法恢復的。 5.如果用戶想再加入對方為好友，需要對方同意並重新新增使用者。
小紅書發怎麼刪除？發布刪除怎麼恢復？
Mar 21, 2024 pm 05:10 PM
小紅書作為一個受歡迎的社群電商平台，吸引了大量用戶分享生活點滴和購物心得。有時候我們可能會不經意發布一些不合適的內容，這時候需要及時刪除，這樣可以更好地維護個人形像或遵守平台規定。一、小紅書發布怎麼刪除？ 1.登入小紅書帳號，進入個人首頁。 2.在個人主頁下方，找到「我的創作」選項，點選進入。 3.在「我的創作」頁面，你可以看到所有發布的內容，包括筆記、影片等。 4.找到需要刪除的內容，點選右側的「...」按鈕。 5.在彈出的選單中，選擇“刪除”選項。 6.確認刪除後，該條內容將從你的個人主頁和公開頁面消失
hiberfil.sys是什麼檔案？ hiberfil.sys可以刪除嗎？
Mar 15, 2024 am 09:49 AM
最近有很多網友問小編，hiberfil.sys是什麼文件？ hiberfil.sys佔用了大量的C碟空間可以刪除嗎？小編可以告訴大家hiberfil.sys檔是可以刪除的。下面就來看看詳細的內容。 hiberfil.sys是Windows系統中的隱藏文件，也是系統休眠文件。通常儲存在C盤根目錄下，其大小與系統安裝記憶體大小相當。這個檔案在電腦休眠時被使用，其中包含了當前系統的記憶體數據，以便在恢復時快速恢復到先前的狀態。由於其大小與記憶體容量相等，因此它可能會佔用較大的硬碟空間。 hiber
微信檔案傳輸助手怎麼徹底刪除_微信檔案傳輸助手關閉方法介紹
Mar 20, 2024 pm 08:31 PM
微信的文件傳輸助手是每個用戶都有的，有些用戶將它當做成了備忘錄，會記錄一些東西。那麼微信檔案傳輸助手要怎麼徹底刪除呢？下面就讓小編為大家詳細介紹一下吧。微信檔案傳輸助手怎麼徹底刪除答案：【微信】-【長按檔案傳輸助手】-【刪除該聊天】。具體步驟：1、先開啟微信軟體，進入到首頁後我們找到【檔案傳輸助理】長按；2、然後會彈出標為未讀、置頂該聊天、不顯示該聊天、刪除該聊天，在這裡我們點選【刪除該聊天】即可；
抖音聊天記錄怎麼徹底消除乾淨
May 07, 2024 am 11:14 AM
1.開啟抖音app，點選介面底部的【訊息】，點選需要刪除的聊天對話入口。 2.長按任一聊天記錄，點選【多選】，勾選想要刪除的聊天記錄。 3.點選右下角的【刪除】按鈕，在彈出的視窗中選擇【確認刪除】即可將這些記錄永久刪除。
