JavaScript 节点的删除与重建示例代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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">
/* Reset Style (By: www.shouce.ren ) */
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.codefans.net/jscss/code/2550.shtml">JavaScript日历面板</a></td>
		<td><a href="#del" class="lnk-del">删除</a></td>
	</tr>
	<tr>
		<td>2</td>
		<td class="left"><a href="http://www.codefans.net/jscss/code/2546.shtml">JS放大镜,JavaScript图片放大代码</a></td>
		<td><a href="#del" class="lnk-del">删除</a></td>
	</tr>
	<tr>
		<td>3</td>
		<td class="left"> <a href="http://www.codefans.net/jscss/code/2545.shtml">超小代码实现文字动画，出自1K写出3D圣诞树的作者</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>

AخA
 
<!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">
/* Reset Style (By: www.shouce.ren ) */
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;}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

JavaScript 节点的删除与重建示例代码

分类

网站常用

描述

JavaScript 节点的删除与重建示例代码，删除节点后，会自动重新建立节点，序号自动排列，比如删除当前的第3条数据后，第4条的序号会智能变为3，以此类推，保证序号不乱。