day16-模态编辑框

一、前言

　　之前我们用dom写的一个模块编辑框，今天我们用jquery的知识来写一个模块编辑框，看看jquery是怎么完成这个小示例的，如图：

　　

二、操作的html

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
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" onclick="addElement();"/>
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a>|<a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a>|<a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.3</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a >|<a class="del">删除</a>
            </td>
        </tr>
    </table>
 
    <div class="shadow hide"></div>
 
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"/>
            <input name="port" type="text"/>
        </div>
        <div>
            <input type="button" value="取消" onclick="cancleModal();"/>
            <input type="button" value="确定" onclick="confirmModal();"/>
        </div>
    </div>
 
    <script src="jquery-1.12.4.js"></script>
    <script>
        //js代码
    </script>
</body>

三、操作模态对话框

3.1、添加

1
2
3
4
//添加
function addElement(){
    $(".shadow,.modal").removeClass("hide"); //添加时，去掉hide样式
}

3.2、取消

1
2
3
4
5
//取消
function cancleModal(){
    $(".shadow,.modal").addClass("hide"); //添加hide类
    $('.modal input[type="text"]').val("");  //初始化模态对话框中的输入框
}

3.3、编辑

①前戏之文本操作

1
2
3
4
5
6
7
8
9
$("#i1").text();                 //获取文本内容
$("#i1").text("new_text");   //设置文本内容，但是不解析html标签
 
$("#i1").html();            //获取文本内容，包括html标签
$("#i1").html("<a>zhangqigao</a>");   //设置文本内容，解析html标签
 
 
$("#i2").val();              //获取标签value
$("#i2").val("new_val");   //设置标签value

②编辑代码

1
2
3
4
5
6
7
8
9
10
//编辑
$(".edit").click(function(){
    $(".shadow,.modal").removeClass("hide");
    var tds = $(this).parent().prevAll();
    var port = $(tds[0]).text();
    var host = $(tds[1]).text();
    $('.modal input[name="hostname"]').val(host);
    $('.modal input[name="port"]').val(port);
 
})

3.4、编辑的第二种方式

①字符串拼接

说明：在js中只能用 +  作字符串的拼接

1
2
3
4
var n = 'hostname';
var a1 = '.modal input[name="';
var a2 ='"]';
var temp = a1 + n + a2;

②实现方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(".edit").click(function(){
    $(".shadow,.modal").removeClass("hide");
    var tds = $(this).parent().prevAll();
    tds.each(function(){
        //获取td的target属性值
        var n = $(this).attr("target");
        //获取td中的内容
        var text = $(this).text();
        //拼接字符串
        var a1 = '.modal input[name="';
        var a2 ='"]';
        var temp = a1 + n + a2;
        //替换值
        $(temp).val(text);
    })
<strong>})
</strong>

3.5、删除

1
2
3
$(".del").click(function(){
    $(this).parent().parent().remove()
})

3.6、新增

　　

1
2
3
4
5
6
7
8
9
10
11
function confirmModal(){
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = "11.11.11.11"; /* 需要之后的一个知识点这里先这样吧*/
    var td2 = document.createElement("td");
    td2.innerHTML = "80";
    $(tr).append(td1);
    $(tr).append(td2);
    $("#tb").append(tr);
    $(".shadow,.modal").addClass("hide");
}
posted @ 2018-05-23 15:33  东郭仔  阅读(104)  评论(0)    收藏  举报