JavaScript列表的增删与移动

最新推荐文章于 2024-06-28 22:29:47 发布

Jasmyn1

最新推荐文章于 2024-06-28 22:29:47 发布

阅读量6.9k

点赞数 6

本文链接：https://blog.csdn.net/Jasmyn1/article/details/106940385

版权

案例：列表的增删与移动

html代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .list{
    display:inline-block;
    background:#fff;
    color:#333;
    text-align:left;
    font-size:20px;
    }
   .list-ul{
    list-style:none;
    margin:0;
    padding:0;
    }
   .list-option{
    padding:6px 0;
    }
   .list-input{
    width:300px;
    border:1px solid #ccc;
    padding:4px;
    font-size:14px;
    color:#333;
    }
   .list-input:hover{
    background:#effaff;
    }
   .list-btn span{
    color:#0065A0;
    cursor:pointer;
    }
   .list-btn span:hover{
    text-decoration:underline;
    }
   .list-bottom{margin-top:5px;}
   .list-add-show{
    color:#f60;
    cursor:pointer;
    }
   .list-add-show:before{
    position:relative;
    top:1px;
    margin-right:5px;
    content:"+";
    font-weight:700;
    font-size:20px;
    }
   .list-add-add{
    cursor:pointer;
    }
   .list-add-cancel{
    cursor:pointer;
    }
   .list-add-input{
    width:180px;
    border:1px solid #ccc;
    padding:4px;
    font-size:14px;
    color:#333;
    }
   .list-add-input:hover{background:#effaff;}
   .list-hide{display:none;}
  </style>
 </head>
 <body>
  <form>
   <div class="list">
    <ul class="list-ul">
     <li class="list-option">
      <input class="list-input" type="text" name="list[]">
      <span class="list-btn">
       <span class="list-up">[上移]</span>
       <span class="list-down">[下移]</span>
       <span class="list-del">[删除]</span>
      </span>
     </li>
    </ul>
    <div class="list-bottom">
     <span class="list-add-show">添加项目</span>
     <div class="list-add-area list-hide">
      添加到列表：
      <input class="list-add-input" type="text" name="list[]">
      <input class="list-add-add" type="button" value="添加">
      <input class="list-add-cancel" type="button" value="取消">
     </div>
    </div>
   </div>
  </form>
  <script src="SmartList.js"></script>
  <script type="text/javascript">
   SmartList('list',['PHP','JavaScript']);
  </script>
 </body>
</html>

js代码：
SmartList.js

(function(window){
 var SmartList=function(prefix,defList){
  Find.prototype.prefix=prefix;
  var find=new Find(document.getElementsByClassName(prefix)[0]);
  var list = new List(find.className('option'));
  for (var i in defList) {
   list.add(defList[i]);
  }
  var add = {
   'show':find.className('add-show'),
   'area':find.className('add-area'),
   'input':find.className('add-input'),
   'add':find.className('add-add'),
   'cancel':find.className('add-cancel')
  };
  add.show.onclick = function() {
   add.area.classList.remove(prefix + '-hide');
  };
  add.add.onclick = function(){
   list.add(add.input.value);
  };
  add.cancel.onclick =  function() {
   add.area.classList.add(prefix + '-hide');
  };
 };
 function Find(obj){
  this.obj=obj;
 }
 Find.prototype.prefix='';
 Find.prototype.className=function(className){
  return this.obj.getElementsByClassName(this.prefix+'-'+className)[0];
  var ul=find.className('ul');
  var option=find.className('option');
 };
 Find.prototype.prev=function(){
  var node = this.obj.previousSibling;
  while (node) {
   if (node.nodeType === Node.ELEMENT_NODE) {
    break;
   }
   node = node.previousSibling;
  }
  return node;
 };
 Find.prototype.next=function(){
  var node = this.obj.nextElementSibling;
  while (node) {
   if (node.nodeType === Node.ELEMENT_NODE) {
    break;
   }
   node = node.nextElementSibling;
  }
  return node;
 };
 function List(tmp) {
  this.tmp = tmp; 
  this.obj = tmp.parentNode;
  this.obj.removeChild(tmp);
  }
  List.prototype.add=function(value){
   var tmp = this.tmp.cloneNode(true);
   var find = new Find(tmp);
   find.className('input').value = value;
   var obj = this.obj;
   find.className('up').onclick = function() {
    var prev = find.prev(); 
    if (prev) {
     obj.insertBefore(tmp, prev);
    } else {
     alert('已经是第一个了');
    }
   };
   find.className('down').onclick = function() {
    var next = find.next();
    if (next) {
     obj.insertBefore(next, tmp);
    } else {
     alert('已经是最后一个了');
    }
   };
   find.className('del').onclick = function() {
    if (confirm('您确定要删除？')) {
     obj.removeChild(tmp);
    }
   };
   this.obj.appendChild(tmp);
  }
 window['SmartList']=SmartList;
})(window);

Jasmyn1

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
JavaScript列表的增删与移动

案例：列表的增删与移动html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .list{ display:inline-block; background:#fff; color:#333; text-align:left;
复制链接

扫一扫