<div class="group"> <h2><a>已选团队成员</a></h2> <ul class="joined_list"></ul> <dl class="join_list"> <h3><b>可选人列表</b> <span class="page_list"> <a href="#"><<</a> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">>></a> </span> </h3> <dt> <span>序号</span> <span>账号</span> <span>所属部门</span> <span>角色名称</span> <span>手机号码</span> <span>邮箱地址</span> <span> <select> <option>加入状态</option> <option>已加入</option> <option>未加入</option> </select> </span> <span>操作</span> </dt> <dd> <span class="id">1</span> <span class="name">韦雪云</span> <span class="position">项目运营部</span> <span class="title">部门经理</span> <span class="mobile">15148103341</span> <span class="email">[email protected]</span> <span class="join">未加入</span> <span class="control"><a class="view" onclick="uiwopen()">查看</a><a class="add" onclick="addme(this)">添加</a></span> </dd> <dd> <span class="id">2</span> <span class="name">张娟</span> <span class="position">项目运营部</span> <span class="title">项目副经理</span> <span class="mobile">15148103341</span> <span class="email">[email protected]</span> <span class="join">未加入</span> <span class="control"><a class="view" onclick="uiwopen()">查看</a><a class="add" onclick="addme(this)">添加</a></span> </dd> </dl> </div>
1 .group { display: block; width: 100%; text-decoration: none; font-size: 0.9vw; line-height: 1.6vw; font-family: sans-serif; } 2 .group h2 { display: block; margin: 0; padding: 0; } 3 .group h2 a { display: inline-block; font-size: 1.2vw; padding: 0.5vw 1vw; color: #666; background: #eee; border: #ccc solid; border-width: 1px 1px 0 1px;font-weight: normal; } 4 .group .joined_list { display: block; width: calc(100% - 2px); margin: 0; padding: 0; border: #ccc solid 1px; min-height: 5vw; overflow: hidden; } 5 .group .joined_list li { display: block; float: left; padding: 0.5vw; margin: 1vw; border: #333 solid 1px; border-radius: 0.25vw; font-size: 0.9vw; line-height: 1.5vw; list-style: none; } 6 .group .joined_list li a.del { display: inline-block; position: relative; color: transparent; cursor: pointer; margin: 0 0.5vw; } 7 .group .joined_list li a.del::after { content: "\2716"; position: absolute; width: 0.9vw; height: 0.9vw; font-size: 0.7vw; line-height: 0.9vw; text-align: center; border-radius: 50%; top: 0.325vw; left: 0; cursor: pointer; background: #333; color: #fff; } 8 9 .group .join_list { display: block; width: calc(100% - 2px - 2vw); margin: 2vw 0; padding: 1vw; border: #ccc solid 1px; } 10 .group .join_list h3 { display: block; font-size: 1vw; margin: 0; padding: 0; } 11 .group .join_list h3 b { color: #00A9C2; } 12 .group .join_list h3 b::before { content: "\272A"; margin: 0 0.5vw 0 0; } 13 .group .join_list h3 span.page_list { float: right; } 14 .group .join_list h3 span.page_list a { font-size: 0.8vw; margin: 0 0.1vw; text-decoration: none; color: #666; cursor: pointer; } 15 .group .join_list h3 span.page_list a.active { color: #00A9C2; cursor: default; } 16 17 .group .join_list dt, 18 .group .join_list dd { display: block; clear: both; overflow: hidden; margin: 0; padding: 0;} 19 .group .join_list dt { margin: 1vw 0; height: 3.25vw; } 20 .group .join_list dd { margin: 1px 0;border-bottom: 1px dashed #ccc;} 21 .group .join_list dt span, 22 .group .join_list dd span { display: block; float: left; margin: 0 1px; padding: 0.5vw; text-align: center; } 23 .group .join_list dt span { padding: 1vw 0.5vw;} 24 .group .join_list dt span:nth-child(1), 25 .group .join_list dd span:nth-child(1) { width: calc(5% - (2px + 1vw)); } 26 .group .join_list dt span:nth-child(2), 27 .group .join_list dd span:nth-child(2) { width: calc(10% - (2px + 1vw)); } 28 .group .join_list dt span:nth-child(3), 29 .group .join_list dd span:nth-child(3) { width: calc(10% - (2px + 1vw)); } 30 .group .join_list dt span:nth-child(4), 31 .group .join_list dd span:nth-child(4) { width: calc(10% - (2px + 1vw)); } 32 .group .join_list dt span:nth-child(5), 33 .group .join_list dd span:nth-child(5) { width: calc(10% - (2px + 1vw)); } 34 .group .join_list dt span:nth-child(6), 35 .group .join_list dd span:nth-child(6) { width: calc(20% - (2px + 1vw)); } 36 .group .join_list dt span:nth-child(7), 37 .group .join_list dd span:nth-child(7) { width: calc(15% - (2px + 1vw)); } 38 .group .join_list dt span:nth-child(8), 39 .group .join_list dd span:nth-child(8) { width: calc(20% - (2px + 1vw)); } 40 41 .group .join_list dt span select { position: relative; font-size: 0.8vw; } 42 43 .group .join_list dd span.join { color: rgb(200,0,0);} 44 .group .join_list dd span.control a { display: inline-block; color: #00B0CF; padding: 0 5px; margin: 0 5px; cursor: pointer; }
<script> //添加成员 function addme(me) { var name = $(me).parent("span").siblings("span.name").html(); var title = $(me).parent("span").siblings("span.title").html(); var button = confirm("您确定将" + name + "加入到项目团队吗?"); if (button == true){ $(me).parent("span").siblings("span.join").html("已加入").css("color","rgb(0,200,0)"); $("ul.joined_list").append('<li>' + title + ': <b>' + name + '</b>' + '<a class="del" onclick="delme(this)">X</a></li>'); $(me).css("display","none"); } }; //删除成员 function delme(me) { var name = $(me).siblings("b").html(); var button = confirm("您确定将" + name + "移出项目团队吗?"); if (button == true){ $(me).parent("li").remove(); $("dl.join_list dd").each(function () { if ($(this).children("span.name").html() == name) { $(this).children("span.join").html("未加入").css("color","rgb(200,0,0)"); $(this).children("span.control").children("a.add").css("display","inline-block"); } }); } }; </script>