动态获取姓名,弹出花名册
来源:互联网 发布:全民公主神兵数据图 编辑:程序博客网 时间:2024/05/01 11:37
1.基于jQuery和layer,实现弹出动态获取的人员名称,选择并添加至输入框,第二次显示输入框中已有的人员名称且不能够再次选择之前已经选择的值。
$(function() { $.fn.extend({ personlayer: function() { $(this).on("focus", function() { var a = this; $("body").after('<div id="addPerson" style="display: none;">' + '<table class="table table-bordered" id="addTable">' + "</table></div>"); $.ajax({ url: "这里是url", type: "post", dataType: "json", success: function(f) { var i = []; for (key in f.data) { i.push(f.data[key].name) } $("#addTable tr").remove(); td = document.querySelectorAll("td"); if (i.length > td.length) { var b = Math.ceil((i.length - td.length) / 5); for (var e = 0; e < b; e++) { $("#addTable").append("<tr><td></td><td></td><td></td><td></td><td></td></tr>") } } else { $("#addTable tr").remove(); for (var e = 0; e < i.length; e++) { $("#addTable").append("<tr><td></td><td></td><td></td><td></td><td></td></tr>") } } $("#addTable td").on("click", function() { $(this).toggleClass("in"); $(".in").css({ "background": "rgba(255, 151, 25, 0.8)" }) }); var g; var k = document.querySelectorAll("td"); var m = a.value, c = m.toString(), j = c.split(";"); var h = []; for (var d = 0; d < j.length; d++) { h.push(j[d]) } setTimeout(function() { for (var n = 0; n < i.length; n++) { k[n].innerText = i[n] } for (var n = 0; n < k.length; n++) { for (var l = 0; l < h.length; l++) { if (h[l] == k[n].innerText) { k[n].style.backgroundColor = "#eee"; k[n].style.pointerEvents = "none"; k[n].classList.remove("in") } } } }, 100) }, error: function() { alert(data.msg) } }); layer.open({ title: "人员名册", type: 1, area: ["400px", "400px"], content: $("#addPerson"), fix: false, btn: ["确定", "取消"], yes: function(b) { ins = document.querySelectorAll(".in"); for (var c = 0; c < ins.length; c++) { a.value += ins[c].innerText + ";" } layer.close(b) }, cancel: function() { return true }, btn2: function(b) { return true } }) }) } }); $(".allowperson").personlayer()});
阅读全文
0 0
- 动态获取姓名,弹出花名册
- 获取好友列表(花名册)
- 花名册
- gloox 获取花名册和联系人出席信息
- XMPP协议获取花名册(好友列表)
- jquery操作select实现根据拼音动态获取姓名列表
- Layer弹出层动态获取数据
- 根据电话号码获取联系人姓名
- 如何获取字符串的姓名
- 根据姓名获取拼音 C#
- php 获取姓名拼音首字母
- 获取联系人姓名和电话
- 获取手机联系人姓名,电话
- web页面上 菜单弹出窗口 动态获取 数据
- IOS使用XMPP最新教程(四)获取好友列表 (通过花名册)
- 用动态数组保存学生姓名
- 用动态数组保存学生姓名
- 根据身份证获取姓名和性别
- Java线程中使用 sleep()和wait()区别
- 鼠标左键控制玩家移动
- FEC详解二
- rqnoj 95
- Hibernate基于外键和主键的双向一对一关系映射
- 动态获取姓名,弹出花名册
- 找啊找啊找GF
- FEC详解三
- MySQL 中 某字段按abc分组排序
- 前端面试必备——图
- JVM 发生OOM的四种情况
- vlookup使用详解
- Linux 获取时间的方法
- 修改无序或有序的样式风格