| 网站首页 | 业界新闻 | 群组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
共有 456 人关注过本帖
标题:请大佬帮忙看个程序咋整 实在没思路 急 感谢
只看楼主 加入收藏
li71
Rank: 1
等 级:新手上路
帖 子:32
专家分:0
注 册:2018-9-8
结帖率:100%
  问题点数:0  回复次数:2   
请大佬帮忙看个程序咋整 实在没思路 急 感谢
实现如下页面,选择队员后,可以实现位置的上移和下移;单击“删除”按钮,首先提示“你确认要删除所选队员吗?”,单击“确定”删除所选队员,单击“取消”则不操作。如果没有选择队员,就单击上述三个按钮,则提示“请先选择队员!”;单击“添加”按钮,弹出对话框,输入队员姓名,添加到列表框最后;单击“删除全部”,首先提示“你确认要删除全部队员吗?”,单击“确定”删除全部队员,单击“取消”则不操作。
 
附件: 您没有浏览附件的权限,请 登录注册
2018-10-29 17:08
li71
Rank: 1
等 级:新手上路
帖 子:32
专家分:0
注 册:2018-9-8
  得分:0 
(function(window) {
  /**
   * SmartList 智能列表生成
   * @param {String} prefix 前缀
   * @param {Array} defList 默认项数组
   */
  var SmartList = function(prefix, defList) {
    Find.prototype.prefix = prefix;
    var find = new Find(document.getElementsByClassName(prefix)['0']);
    var list = new List(find.className('opt'));
    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() {
        prompt("请输入:");
      list.add(add.prompt.value);
    };
    add.cancel.onclick = function() {
      add.area.classList.add(prefix + '-hide');
    };
  };
  
  
  
  /**
   * Find 查找器
   * @constructor
   * @param {Object} obj 待查找对象所在容器
   */
  function Find(obj) {
    this.obj = obj;
  }
  Find.prototype = {
    prefix: '',  // 待查找的前缀
    /**
     * 按照class查找元素
     * @param {String} className
     */
    className: function(className) {
      return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
    },
    /**
     * 查找当前元素的前一个兄弟元素节点
     * @returns {Object} 查找结果
     */
    prev: function() {
      var node = this.obj.previousSibling;
      while(node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          break;
        }
        node = node.previousSibling;
      }
      return node;
    },
    /**
     * 查找当前元素的后一个兄弟元素节点
     * @returns {Object} 查找结果
     */
    next: function() {
      var node = this.obj.nextSibling;
      while(node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          break;
        }
        node = node.nextSibling;
      }
      return node;
    }
  };
  
  
  /**
   * List 生成列表
   * @constructor
   * @param {Object} tmp 模板对象
   */
  function List(tmp) {
    this.tmp = tmp;
    this.obj = tmp.parentNode;
    this.obj.removeChild(tmp);
  }
  List.prototype = {
    /**
     * 向列表中添加项目
     * @param {String} value 新项目的文本值
     */
    add: function(value) {
      var tmp = this.tmp.cloneNode(true);
      // ① 将value添加到list-input的value属性中
      var find = new Find(tmp);
      find.className('input').value = value;
      var obj = this.obj;
      // ② 为list-up(上移)添加单击事件
      find.className('up').onclick = function() {
        var prev = find.prev();
        if (prev) {
          obj.insertBefore(tmp, prev);
        } else {
          alert('已经是第1个');
        }
      };
      // ③ 为list-down(下移)添加单击事件
      find.className('down').onclick = function() {
        var next = find.next();
        if (next) {
          obj.insertBefore(next, tmp);
        } else {
          alert('已经是最后1个');
        }
      };
      // ④ 为list-down(删除)添加单击事件
      find.className('del').onclick = function() {
        if (confirm('您确定要删除?')) {
          obj.removeChild(tmp);
        }
      };
      // ⑤ 将创建的列表项添加到列表末尾
      this.obj.appendChild(tmp);
    }
  };
  
})(window);


我自己也写了点
这是我的js文件  




<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>优秀队员排行榜</title>
    <style>
      body{text-align:center}
      select{
     width:220px;
     height:300px;
}
    </style>
  </head>
  <body>
  <p><h1>优秀队员排行榜</h1></p>
  <select name="profession"multiple="multiple">
      <option class="list-opt">张欣</option>
      <option class="list-opt">李明</option>
      <option class="list-opt">王紫悦</option>
      <option class="list-opt">赵刚</option>
</select>
   
      
            <input class="list-up" type="button" value="上移">
            <input class="list-down" type="button" value="下移">
            <input class="list-add-add" type="button" value="添加">
            <input class="list-del" type="button" value="删除">
         
    <script src="duiyuan.js"></script>
   
  </body>
</html>

这是h5文件  

接下来就不会写了  只写了个框架   求助
2018-10-29 17:09
icecool
Rank: 9Rank: 9Rank: 9
等 级:贵宾
威 望:20
帖 子:1203
专家分:1309
注 册:2005-3-14
  得分:0 
我觉得你将列表写到json数组中,与option对应,
再来根据上移下移来调整json的排列顺序,再去填充option会简单点?

loading...
2018-10-30 10:59







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.118574 second(s), 8 queries.
Copyright©2004-2019, BCCN.NET, All Rights Reserved