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

最新推荐文章于 2020-11-21 00:29:59 发布

hello，是翠花呀

最新推荐文章于 2020-11-21 00:29:59 发布

阅读量631

点赞数

分类专栏： jQuery 文章标签： jquery 花名册动态获取生成表格

本文链接：https://blog.csdn.net/qq_26769677/article/details/77752072

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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()
});