JavaScript实现节点的删除与序号重建实例
更新时间：2015年08月05日 11:46:10 作者：皮蛋
这篇文章主要介绍了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="https://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="https://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="https://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程序设计有所帮助。
相关文章
这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区、前端框架与前端类库的区别、前端MVC框架思想等内容,需要的朋友可以参考下2015-03-03
在处理财务账款类需求时需要将转账金额写成大写的,下面这篇文章主要给大家介绍了关于JS转换金额大写方法的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了webpack 如何同时输出压缩和未压缩的文件的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
许愿墙中用到的函数...2006-10-10
这篇文章主要为大家详细介绍了JavaScript实现全选和全不选操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了js实现简单翻牌小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
实现的效果是当鼠标移到某一个标签的时候，在下面的内容区显示对应的内容，并且相应标签的颜色需要改变,这样的效果是CSS和JS配合实现的,下面我们就来看看具体代码2013-04-04
本文介绍了javascript获取以及设置光标位置的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript为select添加option的方法和示例，十分的简单实用，有需要的小伙伴可以参考下。2015-07-07
在工作中经常会遇到js限制输入方面的要求，本文将详细介绍其实现原理，需要的朋友可以参考下2012-12-12
最新评论