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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 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的十大要点(上)
2009/02/04 PHP
浅析php数据类型转换
2014/01/09 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
js实现单元格拖拽效果
2020/02/10 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Saltstack快速入门简单汇总
2016/03/01 Python
python 删除非空文件夹的实例
2018/04/26 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python安装requests库的实例代码
2019/06/25 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
学生宿舍管理制度
2014/01/30 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
岗位说明书范文
2014/05/07 职场文书
销售团队口号大全
2014/06/06 职场文书
煤矿安全协议书
2014/08/20 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫