Day45 jquery表格操作、轮播图

最新推荐文章于 2023-06-02 17:04:29 发布

weixin_30566111

最新推荐文章于 2023-06-02 17:04:29 发布

阅读量198

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/longerandergou/p/11124239.html

版权

1.表格操作增删改查（必须要会的）

基本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<!--    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            margin: 50px auto 0;
        }
        #myModal{
            position:fixed;
            top:0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);;
        }
        .modal{
            width: 500px;
            margin: 50px auto 0;
            background: #fff;
        }
        .close-box {
            overflow: hidden;
        }
        .close{
            float: right;
            height: 20px;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>


<div class="wraper">
    <div class="box panel panel-default">
        <div class="panel-heading">
        <h3 class="panel-title">员工管理</h3>
      </div>
        <div class="panel-body">
        <button id="add_btn" class="btn btn-success">新增大侠</button>
<!--        <table border="1" style="border-collapse:collapse;">-->
        <table class="table table-striped table-hover" border="1" style="border-collapse:collapse;" >
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>部门</th>
                <th>薪水</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>令狐冲</td>
                <td>18</td>
                <td>技术部</td>
                <td>2300</td>
                <td>
                    <button class="btn_del btn btn-danger btn-xs">删除</button>
                    |
                    <button class="btn_edit">编辑</button>
                </td>
            </tr>
            <tr>
                <td>张无忌</td>
                <td>23</td>
                <td>技术部</td>
                <td>3300</td>
                <td>
                    <button class="btn_del">删除</button>
                    |
                    <button class="btn_edit">编辑</button>
                </td>
            </tr>
        </table>
    </div>
    </div>
</div>

<!-- Modal 模态对话框 -->
<div id="myModal" class="hidden">
    <div class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="close-box">
                <button class="close"><span>&times;</span></button>
                </div>
                <h4 class="modal-title" id="myModalLabel">新增大侠</h4>
            </div>
            <div class="modal-body">
                <p>姓名：<input type="text" id="username"></p>
                <p>年龄：<input type="text" id="age"></p>
                <p>部门：<input type="text" id="dep"></p>
                <p>薪水：<input type="text" id="salary"></p>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btn_save" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="jquery.js"></script>
<script>
    /*
    新增
    1. 通过点击新增按钮，弹出模态对话框。（移除class=hidden）了、；
    2. 在input输入新增的信息；
    3. 动态生成tr和td标签，并且将input的value加给td的文本；
    4. 点保存的时候，模态对话框要隐藏（addClass= “hidden”）
    细节：当我不想新增的时候，点击关闭和右上角的×进行模态隐藏。
     */

    $('#add_btn').click(function () {
        $("#myModal").removeClass('hidden');
    });

    $("#btn_save").click(function () {
        $("table").append(
            "<tr>" +
                "<td>"+ $('#username').val() +"</td>" +
                "<td>"+ $('#age').val() +"</td>" +
                "<td>"+ $('#dep').val() +"</td>" +
                "<td>"+ $('#salary').val() +"</td>" +
                "<td><button class='btn_del'>删除</button> | <button class='btn_edit'>编辑</button></td>" +
            "</tr>"
        );
        $("#myModal").addClass('hidden');
        $(".modal-body input").val("");
    });

    $("#btn_close,.close").click(function () {
        $("#myModal").addClass('hidden');
    });


    // 删除
    /*
    1. 给删除按钮绑定事件；
    2. 找到他的爷爷，进行删除操作。
     */
    // $(".btn_del").click(function () {
    //     $(this).parent().parent().remove();
    // })
    $("table").on("click", ".btn_del", function () {
        // 通过on方法来进行事件委托。 第一参数是事件名称， 第二个参数是要绑定的对象， 第三个为驱动程序
        // 注意：给父盒子绑定on。
        $(this).parent().parent().remove();
    });

    // 编辑
    /*
    1. 通过事件委托给编辑按钮绑定事件
    2. 动态生成input标签，并且将td的值，赋值给input。
    3. 进行文本编辑操作， 把标签按钮的文本，设置为保存。
    4. 点击保存进行持久化。（将input标签改为td， 按钮改为编辑）

     */
    // $('table').on('click', '.btn_edit', function () {
    //     var td_list = $(this).parent().siblings();
    //     if ($(this).text() == "编辑"){
    //         $.each(td_list, function (i, j) {
    //         console.log(i, j);
    //         $(j).html($("<input>").val($(j).text()))
    //     });
    //     $(this).text("保存")
    //     }else{
    //         $.each(td_list, function (i, j) {
    //             console.log(i, j);
    //             $(j).text($(j).children('input').val())
    //         });
    //         $(this).text("编辑")
    //     }
    //
    // })
    // 一个的原型
    // $('table').on('click','.btn_edit',function () {
    //     var td_list = $(this).parent().siblings();
    //     $.each(td_list,function (i,j) {
    //         console.log(i,j);
    //         $(j).html($("<input>").val($(j).text()))
    //     })
    // })

    // $('table').on('click', '.btn_edit', function () {
    //         var td_list = $(this).parent().siblings();
    //         if ($(this).text() == "编辑"){
    //             $.each(td_list, function (i, j) {
    //             console.log(i, j);
    //             $(j).html($("<input>").val($(j).text()))
    //         });
    //         $(this).text("保存")
    //         }else{
    //             $.each(td_list, function (i, j) {
    //                 console.log(i, j);
    //                 // $(j).text($(j).children('input').val())
    //                 $(j).text($(j).children('input').val())
    //             });
    //             $(this).text("编辑")
    //   }
    //
    // })

    $('table').on('click','.btn_edit',function () {
        var td_list = $(this).parent().siblings();
        if ($(this).text() == "编辑"){
            $.each(td_list,function (i,j) {
                console.log(i,j);
                $(j).html($("<input>").val($(j).text()))
            });
            $(this).text("保存")
        }else{
            $.each(td_list,function (i,j) {
                console.log(i,j);
                $(j).text($(j).children('input').val())
            });
            $(this).text("编辑")
        }
    })



</script>


</body>
</html>

2.轮播图的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .box{
            width: 500px;
            margin: 0 auto;
            position: relative;
            top:50px;
        }
        .box ul li a img{
            width: 500px;
            height: 300px;
        }
        .box .image li{
            position: absolute;
            top: 0;
            display: none;
        }
        .box ul li.active{
            display: block;
        }
        .num{
            position: absolute;
            top: 270px;
            left: 170px;
        }
        .num li{
               display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 14px;
           }
        .btn{
            width: 30px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            position: absolute;
            top: 120px;
            background: rgba(0,0,0, 0.4);
            display: none;
        }
        .left{
            left:0;
        }
        .right{
            right:0;
        }
        .box:hover .btn{
            display: block;
        }
        .num li.selected{
            background-color: red;
        }
    </style>
</head>
<body>

<div class="box">
    <ul class="image">
        <li class="active"><a href="javascript:void(0);"><img src="images/111.jpg" alt=""></a></li>
        <li><a href="javascript:void(0);"><img src="./images/222.jpg" alt=""></a></li>
        <li><a href="javascript:void(0);"><img src="./images/333.jpg" alt=""></a></li>
        <li><a href="javascript:void(0);"><img src="./images/444.jpg" alt=""></a></li>
        <li><a href="javascript:void(0);"><img src="images/555.jpg" alt=""></a></li>
    </ul>
    <ul class="num"></ul>
        <div class="btn right"> > </div>
        <div class="btn left"> < </div>
</div>


<script src="jquery.js"></script>
<script>
    var i = 0; // 初识下标索引值

    var img_num = $(".image li").length;
    // console.log(img_num); // 查看图片的张数。

    for (var j = 0; j < img_num; j++){
        $('.num').append("<li>")
    }

    // 给第一个圆点，加上默认值
    $(".num li").eq(0).addClass("selected");

    //鼠标悬浮时，切换画面
    $(".num li").mouseover(function () {
        i = $(this).index();
        console.log(i);
        $(".num li").eq(i).addClass("selected").siblings().removeClass("selected");
        $(".image li").eq(i).addClass("active").siblings().removeClass("active");
    });

    // 向右切换（箭头）
    function Go_R() {
        if (i == img_num - 1){
            i = -1;
        }
        i++;
        $(".num li").eq(i).addClass("selected").siblings().removeClass("selected");
        $(".image li").eq(i).addClass("active").siblings().removeClass("active");
    }
    //
    // 向左切换（箭头）
    function Go_L(){
        if(i == 0){
            i = img_num;
        };
        i--;
        $(".num li").eq(i).addClass("selected").siblings().removeClass("selected");
        $(".image li").eq(i).addClass("active").siblings().removeClass("active");
    }


    $('.right').click(Go_R); // 函数不能加括号。
    $('.left').click(Go_L); // 函数不能加括号。
    //
    //
    // // 设置自动轮播
    //
    // var auto = setInterval(Go_R, 1000);
    //
    // $(".box").mouseover(function () {
    //     clearInterval(auto);
    // });
    // $(".box").mouseout(function () {
    //     auto = setInterval(Go_R, 1000);
    // });

    // hover方法
    $(".box").hover(function () {
        clearInterval(auto);
    }, function () {
        auto = setInterval(Go_R, 1000);
    })




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