JavaScriptを使用したノードの削除とシリアル番号の再構築を説明する例-jsチュートリアル-php.cn

JavaScriptを使用したノードの削除とシリアル番号の再構築を説明する例

巴扎黑

リリース： 2017-09-14 11:38:27

オリジナル

1441 人が閲覧しました

本文实例讲述了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>

ログイン後にコピー

以上がJavaScriptを使用したノードの削除とシリアル番号の再構築を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。