博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery模态框实现 后台添加删除修改Ip端口

Posted on   alex_hrg  阅读(244)  评论(0编辑  收藏  举报

主要用到,$('#i1').each(),标签里绑定函数可传参数this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .zhezhao{
            z-index: 99;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
        }
        .motai{
            width: 500px;
            height: 300px;
            position: fixed;
            background-color: white;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -150px;
            z-index: 100;
 
        }
    </style>
</head>
<body>
<div class="zhezhao hide"></div>
<div class="motai hide">
    <table id="tb2" border="1">
        <thead><tr><th>IP</th><th>端口</th><th>操作</th></tr></thead>
        <tr><td><input target="ip" type="text" value=""></td><td><input target="port" type="text" value=""></td><td><a id="submit">确定</a>|<a id="cancel">取消</a></td></tr>
    </table>
</div>
<div style="margin: 0 auto;width: 500px;height: 800px;">
<input type="button" value="添加" onclick="addTr();"/>
<table id="tb1" border="1">
    <thead>
        <tr><th>选择</th><th>IP</th><th>端口</th><th>操作</th></tr>
    </thead>
    <tbody>
        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.1</td><td target="port">80</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.2</td><td target="port">81</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.3</td><td target="port">82</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.4</td><td target="port">83</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>
    </tbody>
</table>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
 
    function addTr() {
        $('.zhezhao,.motai').removeClass('hide');
        index = -1;  //标签为空时,模态框提交是新增
    }
 
    function modifyTr(self) {
        $('.zhezhao,.motai').removeClass('hide');
        var tds = $(self).parent().prevAll();
        index = $(self).parent().parent().index(); //记录当前索引,方便修改后提交调用
        tds.each(function () {
            var target = $(this).attr('target');
            var value = $(this).text();
            console.log(target,value);
            $('#tb2 input[target="'+target+'"]').val(value);
        }); //  以上函数,实现按表格列数里的属性target来对应弹出的模态框表格target,依次到tds里的值去填tb2上对应的框
    }
 
    function delTr(self) {
        $(self).parent().parent().remove();
    }
 
    $('#tb2 #submit').click(function () {
        var ip = $('#tb2 input[target="ip"]').val();
        var port = $('#tb2 input[target="port"]').val();
        if(index != -1){
            $('#tb1 td[target="ip"]').eq(index).text(ip);
            $('#tb1 td[target="port"]').eq(index).text(port);
        }else {
            var tag = '<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">'+ip+'</td><td target="port">'+port+'</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>'
            $('#tb1 tbody').append(tag);
        }
        $('.motai,.zhezhao').addClass('hide');
    });
 
    $('#tb2 #cancel').click(function () {
        $('.zhezhao').addClass('hide');
        $('.motai').addClass('hide');
    });
 
</script>
</body>
</html>

  

努力加载评论中...
点击右上角即可分享
微信分享提示