day16-示例：模态编辑框

一、前言

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

　　 day16-示例：模态编辑框

二、操作的html

<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" >
        <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、添加

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

3.2、取消

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

3.3、编辑

①前戏之文本操作

$("#i1").text();                 //获取文本内容
$("#i1").text("new_text");   //设置文本内容，但是不解析html标签

$("#i1").html();            //获取文本内容，包括html标签
$("#i1").html("<a>zhangqigao</a>");   //设置文本内容，解析html标签


$("#i2").val();              //获取标签value
$("#i2").val("new_val");   //设置标签value

②编辑代码

//编辑
$(".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中只能用 + 作字符串的拼接

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

②实现方式

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

3.5、删除

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

3.6、新增

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