JavaScript实现节点的删除与序号重建实例

171 阅读 0 评论 113 点赞

我是靠谱客的博主哭泣帽子，这篇文章主要介绍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" ></base>
</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.uoften.com/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.uoften.com/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.uoften.com/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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!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.uoften.com/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.uoften.com/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.uoften.com/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>