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程序设计有所帮助。
相关推荐
-
javascript删除元素节点removeChild()用法实例
本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme
-
JavaScript中对DOM节点的访问、创建、修改、删除
DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
-
JS动态增加删除UL节点LI及相关内容示例
复制代码 代码如下: <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> <li id=
-
Javascript removeChild()删除节点及删除子节点的方法
下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节
-
Javascript删除指定元素节点的方法
在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加 个输入框,点击删除就删除对应的输入框.在一些js框架,如Prototype中,可以用element.remove()来删除一个节点,核心JS中并 没有这样的方法,IE中有这样一个方法:removeNode(),尝试运行下面的代码 <div><input onclick="removeNode(this)" type="tex
-
删除javascript所创建子节点的方法
本文实例讲述了删除javascript所创建子节点的方法.分享给大家供大家参考.具体如下: js创建的节点,一时不知道如何删除...耗了一大堆时间 for(var i = 0; i < jsonList.length; i++ ){ var li_button = document.createElement("li"); li_button.className = "button"; var li_button_a = document.createElem
-
JavaScript 存在陷阱 删除某一区域所有节点
比较简单的,例如:有一区域<div id="newbody" ></div>,现要求删除其中所有节点.相信很多人会这样写: 复制代码 代码如下: var divpanel = document.getElementById("newbody"); var controlinfo= divpanel.childNodes; for(var index = 0;index < controlinfo.length ;index++) { d
-
初学js 新节点的创建 删除 的步骤
特羡慕写出这些特效的高级程序员.我想学习,可总是不知道怎么去思考,不知道怎么去逻辑.有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的.但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了.改,这个大缺点一定得改.以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高..废话就不扯了,言归正传: 题目:btton 按钮 一个添加 一个删除 ,点击添加按钮就会添加一个节点,点击删除按钮就会删除最后一个节点,添加的新元素点击一下就会被删
-
javascript删除一个html元素节点的方法
本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们
-
JavaScript实现节点的删除与序号重建实例
本文实例讲述了JavaScript实现节点的删除与序号重建.分享给大家供大家参考.具体如下: 这里演示JavaScript节点的删除与重建方法,删除节点后,会自动重新建立节点,序号自动排列,比如删除当前的第3条数据后,第4条的序号会智能变为3,以此类推,保证序号不乱. 运行效果如下图所示: 删除前: 删除后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
-
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节
-
JavaScript DOM节点操作方法总结
节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的
-
javascript动态创建及删除元素的方法
本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr
-
javascript创建元素和删除元素实例小结
本文实例讲述了javascript创建元素和删除元素.分享给大家供大家参考,具体如下: 1.创建元素 动态创建新的DOM元素,是js操作网页对象模型的重要手段之一. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 创建新元素</title> <script type=&qu
-
基于JavaScript实现动态添加删除表格的行
又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t
-
javascript中使用正则表达式删除前后空格的方法
去掉首位空格 复制代码 代码如下: str=str.replace(/^\s+|\s+$/g,''); js正则表达式删除字符串前后空格 String.prototype.trim=function(){ var reSpace=/^\s*(.*?)\s*$/; return this.replace(reSpace,"$1″); }; 让我们分析一下第二行的正则表达式 ^ 行开始 \s* 匹配字符前面的所有空格,贪婪模式重复 (.*?) 捕获组,勉强模式重复匹配任意字符,也就是我们最终需要(去
-
浅谈EasyUI中Treegrid节点的删除
EasyUI中的删除很简单,一般直接复制粘贴就行. 下面是对树节点的删除. 复制代码 代码如下: // 删除 function removes() { var rows = ruletreegrid.treegrid('getSelections'); if (rows && rows.length == 1) { var showmsg = ""; if (rows[0].pid == 0) {
-
JavaScript从数组中删除指定值元素的方法
本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个removeByValue的方法,调用非常简单 定义函数removeByValue进行元素删除 function removeByValue(arr, val) { for(var i=0; i<arr.length; i++) { if(arr[i] == val) { arr.splice(i,
-
JavaScript实现添加及删除事件的方法小结
本文实例总结了JavaScript实现添加及删除事件的方法.分享给大家供大家参考.具体如下: JavaScript添加.删除事件的方法,也就是让某些方法生效指定次数,可以是一次.两次或更多次,但指定次数执行完毕后就删除该方法,使其失效,如果你经常从事JS编程,你就会知道这种功能用得比较多. 先来看看一个比较简单的例子: function $(id) { return document.getElementByIdx_x(id); } var ev = null; var count1 = 0;