Home > Article > Web Front-end > Examples to explain the deletion and serial number reconstruction of nodes using JavaScript

Examples to explain the deletion and serial number reconstruction of nodes using JavaScript

巴扎黑Original: 2017-09-14 11:38:271349browse

本文实例讲述了JavaScript实现节点的删除与序号重建。分享给大家供大家参考。具体如下：

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

运行效果如下图所示：

删除前：

删除后：

具体代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">
&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;title>节点重建、示例代码&lt;/title>
&lt;style type="text/css">
html{color:#000;background:#FFF;font-family:Arial, Helvetica, sans-serif;}
body,p,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;}
&lt;/style>
&lt;base target="_blank" />
&lt;/head>
&lt;body>
&lt;table cellpadding="0" cellspacing="0">
&lt;thead>
  &lt;tr>
    &lt;th width="50">编号&lt;/th>
    &lt;th>标题&lt;/th>
    &lt;th width="50">操作&lt;/th>
  &lt;/tr>
&lt;/thead>
&lt;tbody id="reroder-list">
  &lt;tr>
    &lt;td>1&lt;/td>
    &lt;td class="left">&lt;a href="http://www.jb51.net/article/70631.htm">JS+CSS实现表格高亮的方法&lt;/a>&lt;/td>
    &lt;td>&lt;a href="#del" class="lnk-del">删除&lt;/a>&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>2&lt;/td>
    &lt;td class="left">&lt;a href="http://www.jb51.net/article/70625.htm">JavaScript节点及列表操作实例小结&lt;/a>&lt;/td>
    &lt;td>&lt;a href="#del" class="lnk-del">删除&lt;/a>&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>3&lt;/td>
    &lt;td class="left"> &lt;a href="http://www.jb51.net/article/70613.htm">JavaScript实现删除,移动和复制文件的方法&lt;/a>&lt;/td>
    &lt;td>&lt;a href="#del" class="lnk-del">删除&lt;/a>&lt;/td>
  &lt;/tr>
  &lt;/tbody>
&lt;/table>
&lt;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 &lt; len; ++i) {
      if (hasClass(tempEl[i], className)) {
        elems.push(tempEl[i]);
      }
    }
    if (elems.length &lt; 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&lt;len;i+=1){
        firstTds[i].innerHTML = i;
      }
    }
  };
  for (; i &lt; 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();
&lt;/script>
&lt;/body>
&lt;/html>

The above is the detailed content of Examples to explain the deletion and serial number reconstruction of nodes using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS+CSS method to realize table highlightingNext article：JS+CSS method to realize table highlighting

See more

Examples to explain the deletion and serial number reconstruction of nodes using JavaScript

Related articles