表格实现-增、删、改、查 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #d1 {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .hide {
            display: none;
        }

        #d2 {
            height: 300px;
            width: 600px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -150px
        }

    </style>
</head>
<body>
<div id="d1" class=" c1 hide"></div>
<div id="d2" class=" c1 hide"></div>
<div class="content">
    <input type="button" class="create" value="新增">
    <table border="1px">
        <thead>
        <tr class="title">
            <th>#</th>
            <th>姓名</th>
            <th>爱好</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td class="name">EGon</td>
            <td class='fav'>街舞</td>
            <td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td>
        </tr>
        <tr>
            <td>2</td>
            <td class="name">ALEX</td>
            <td class='fav'>理发</td>
            <td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td>
        </tr>
        <tr>
            <td>3</td>
            <td class="name">小强</td>
            <td class='fav'>二人转</td>
            <td><input type="button" class="add" value="编辑"><input type="button" class="delete" value="删除"></td>
        </tr>

        </tbody>
    </table>
</div>
<!--<div>-->
    <!--<p>姓名：<input type="text"></p>-->

    <!--<p>爱好：<input type="text"></p>-->

    <!--<p><input type="button" value="提交"><input type="button" value="取消"></p>-->
<!--</div>-->
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(".create").on("click", function () {
        $(".c1").removeClass("hide")
        console.log("123")
        $("#d2").html("<p>姓名：<input class='named' type='text'></p><p>爱好：<input class='fave' type='text'></p> <p><input class='submit'  type='button' value='提交'><input  class='cancle' type='button' value='取消'></p>");
        console.log("456")

    })
    $("body").on("click", ".cancle", function () {
        $(".c1").addClass("hide")
    })
    $("body").on("click", ".submit", function () {
        if ($(".named").val() == "") {
            var nameVal = $(".named").val();
            var favVal = $(".fave").val();
            var xuHao = parseInt($("tr:last").children().first().text()) + 1
            console.log(xuHao, nameVal, favVal)
            var trEle = document.createElement("tr");
            $("tbody").append(trEle)
            $(trEle).html("<td class='q1'></td>, <td class='q2' ></td> ,<td class='q3'></td> ,<td><input type='button' value='编辑'><input type='button' class='delete' value='删除'></td>");
            $(".q1").text(xuHao);
            $(".q2").text(nameVal);
            $(".q3").text(favVal);
            $(".c1").addClass("hide");
        }
        else {
            var nameVal = $(".named").val();
            var favVal = $(".fave").val();
        }
    })
    $("body").on("click", ".delete", function () {
        $(this).parent().parent().remove()
    })
    $("body").on("click", ".add", function () {
        $(this).data("name", $(this).parent().siblings(".name").html());
        console.log($(this).data("name"));
        $(this).data("fav", $(this).parent().siblings(".fav").html());
        console.log($(this).data("fav"));
        $(".c1").removeClass("hide");
        $("#d2").html("<p>姓名：<input class='named' type='text'></p><p>爱好：<input class='fave' type='text'></p> <p><input class='submit'  type='button' value='提交'><input  class='cancle' type='button' value='取消'></p>");
        $(".named")[0].value = $(this).data("name");
        $(".fave")[0].value = $(this).data("fav");
        var nameVal = $(".named").val();
        var favVal = $(".fave").val();
        console.log(nameVal, favVal)
        var a1 =  $(this).parent().siblings(".name")
        var a2 =  $(this).parent().siblings(".fav")
//        $(this).parent().siblings(".name").html(nameVal)
//        $(this).parent().siblings(".fav").html(favVal)
        console.log("888")
        $("body").on("click", ".submit", function () {
            var nameVal = $(".named").val();
            var favVal = $(".fave").val();
           a1.html(nameVal)
            a2.html( favVal)
            console.log(nameVal, favVal)
            console.log("5555555")
            $(".c1").addClass("hide");
        })
    })

</script>
</body>
</html>

 

posted @ 2018-10-22 18:51  离人怎挽_wdj  阅读(124)  评论(0)  编辑  收藏  举报