动态获取姓名,弹出花名册

来源:互联网 发布:全民公主神兵数据图 编辑:程序博客网 时间: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()});

这里写图片描述

原创粉丝点击