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


Posted in Javascript onAugust 05, 2015

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

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

运行效果如下图所示:

删除前:

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

删除后:

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

具体代码如下:

<!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://3water.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="https://3water.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="https://3water.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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 #Javascript
JS+CSS实现表格高亮的方法
Aug 05 #Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 #Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 #Javascript
coffeescript使用的方式汇总
Aug 05 #Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 #Javascript
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
js 调整select 位置的函数
2008/02/21 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Django添加feeds功能的示例
2018/08/07 Python
python实现烟花小程序
2019/01/30 Python
使用python+whoosh实现全文检索
2019/12/09 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
档案接收函范文
2014/01/10 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers