jquery作业

作业要求：

参考下图，点击展示不同内容。

 

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}

.header{
background-color: whitesmoke;
width: 100%;
height: 50px;
border-bottom: 2px solid red;
position: relative;
}


.action {
height: 50px;
color: #696969;
font-size: 22px;
font-weight: 200;
line-height: 50px;
padding: 1px 30px 1px 30px;
}
.shopping_car a{
text-decoration: none;
height: 50px;
color: white;
font-size: 13px;
font-weight: 200;
padding: 0px 15px 0 15px;
background-color: #ee0f23;
line-height: 50px;
position: absolute;
left:1500px;
top:0px;
}

.img_cont img{
margin-top: 52px;

}


.a1 {
position: absolute;
left:0;
top:0;
}

.a2{
position: absolute;
left:150px;
top:0;
}

.a3{
position: absolute;
left:300px;
top:0;
}

.a4{
position: absolute;
left:450px;
top:0;
}

.a5{
position: absolute;
left:680px;
top:0;
}

 

.hide{
display: none;
}

.change {
background-color: #ee0f23;
color: #F5F5F5;
}


</style>
</head>
<body>
<script src="jquery-3.2.1.min.js"></script>

<div class="header">
<div class="item">
<div class="action a1">商品介绍</div>
<div class="img_cont hide">
<img src="商品介绍.jpg" alt="">
</div>
</div>

<div class="item">
<div class="action a2">规格与包装</div>
<div class="img_cont hide">
<img src="规格包装.jpg" alt="">
</div>
</div>

<div class="item">
<div class="action a3">售后保障</div>
<div class="img_cont hide">
<img src="售后保障.jpg" alt="">
</div>
</div>

<div class="item">
<div class="action a4">商品评价(3.8万+)</div>
<div class="img_cont hide">
<img src="商品评价.jpg" alt="">
</div>
</div>

<div class="item">
<div class="action a5">社区互动</div>
<div class="img_cont hide">
<img src="社区互动.jpg" alt="">
</div>
</div>


<span class="shopping_car">
<a href="">加入购物车</a>
</span>
</div>

<script>
$(".action ").click(function () {
$(this).addClass("change");
$(this).next().removeClass("hide");
$(this).parent().siblings().children(".action").removeClass("change");
$(this).parent().siblings().children(".img_cont").addClass("hide");

})

</script>

 

</body>
</html>

案例

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .header{
            background-color: whitesmoke;
            width: 100%;
            height: 50px;
            border-bottom: 2px solid red;
            position: relative;
        }


        .action {
            height: 50px;
            color: #696969;
            font-size: 22px;
            font-weight: 200;
            line-height: 50px;
            padding: 1px 30px 1px 30px;
        }
         .shopping_car a{
             text-decoration: none;
             height: 50px;
             color: white;
             font-size: 13px;
             font-weight: 200;
             padding: 0px 15px 0 15px;
             background-color:     #ee0f23;
             line-height: 50px;
             position: absolute;
             left:1500px;
             top:0px;
        }

         .img_cont img{
             margin-top: 52px;

         }


        .a1 {
            position: absolute;
            left:0;
            top:0;
        }

        .a2{
            position: absolute;
            left:150px;
            top:0;
        }

        .a3{
           position: absolute;
            left:300px;
            top:0;
        }

        .a4{
           position: absolute;
            left:450px;
            top:0;
        }

        .a5{
           position: absolute;
            left:680px;
            top:0;
        }



        .hide{
            display: none;
        }

        .change {
            background-color:     #ee0f23;
            color: #F5F5F5;
        }


    </style>
</head>
<body>
    <script src="jquery-3.2.1.min.js"></script>

    <div class="header">
        <div class="item">
            <div class="action a1">商品介绍</div>
            <div class="img_cont hide">
                    <img src="商品介绍.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a2">规格与包装</div>
            <div class="img_cont hide">
                    <img src="规格包装.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a3">售后保障</div>
            <div class="img_cont hide">
                    <img src="售后保障.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a4">商品评价(3.8万+)</div>
            <div class="img_cont hide">
                    <img src="商品评价.jpg" alt="">
            </div>
         </div>

        <div class="item">
            <div class="action a5">社区互动</div>
            <div class="img_cont hide">
                    <img src="社区互动.jpg" alt="">
            </div>
         </div>


        <span class="shopping_car">
            <a href="">加入购物车</a>
        </span>
    </div>

    <script>
        $(".action ").click(function () {
            $(this).addClass("change");
            $(this).next().removeClass("hide");
            $(this).parent().siblings().children(".action").removeClass("change");
            $(this).parent().siblings().children(".img_cont").addClass("hide");

     })

    </script>



</body>
</html>
复制代码

 

 

作业要求：

表格的编辑，添加和删除功能

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/bootstrap.css">

<style>
*{
margin:0;
}

.shade1{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
opacity: 0.6;
}

.model1{
position: fixed;
left:300px;
top:100px;
width: 600px;
height: 300px;
background-color: white;
}

.hide1{
display: none;
}
</style>
</head>
<body>

<button class="btn-primary btn-lg">添加</button>

<div class="container">
<div class="row">
<div class="col-md-10">

<table class="table table-bordered table-hover">
<thead>
<tr class="info">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>

<tbody id="bb1">
<tr>
<td>Tom</td>
<td>18</td>
<td>男</td>
<td>101</td>
<td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td>
</tr>

<tr>
<td>Jack</td>
<td>19</td>
<td>男</td>
<td>102</td>
<td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td>

</tr>


<tr>
<td>Jerry</td>
<td>20</td>
<td>女</td>
<td>103</td>
<td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="shade1 hide1"></div>
<div class="model1 hide1">
<h3 class="text-center">添加学生信息</h3>

<form action="" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">姓名</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">年龄</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">性别</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">班级</label>
<div class="col-sm-6">
<input class="col-sm-2 form-control item" type="text" >
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-default" id="subBtn" value="submit">
</div>
</div>
</form>
</div>

<script src="jquery-3.1.1.js"></script>

<script>

// 删除及委派
$("#bb1").on("click",".btn-danger",function(){
$(this).parent().parent().remove()
})


//添加
$(".btn-primary").click(function(){
$(".shade1").show();
$(".model1").show();
})

$("#subBtn").click(function(){
// 关闭对话框
$(".shade1").hide();
$(".model1").hide();

// 获取用户输入值
var arr=[];

$(".item").each(function(){
arr.push($(this).val());

});

// 构建tr标签
var s='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td>'+arr[3]+'</td><td><button ' +
'class="btn-danger">删除</button> <button class="btn-success">编辑</button></td></tr>'

$("#bb1").append(s)

})


// 编辑及委派
// $("#bb1").on("click",".btn-success",function(){
// $(this).
// })
</script>


</body>
</html>

例如

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.css">

    <style>
        *{
            margin:0;
        }

        .shade1{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: gray;
            opacity: 0.6;
        }

        .model1{
            position: fixed;
            left:300px;
            top:100px;
            width: 600px;
            height: 300px;
            background-color: white;
        }

        .hide1{
            display: none;
        }
    </style>
</head>
<body>

<button class="btn-primary btn-lg">添加</button>

<div class="container">
    <div class="row">
        <div class="col-md-10">

            <table class="table table-bordered table-hover">
                <thead>
                    <tr class="info">
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>班级</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tbody id="bb1">
                    <tr>
                        <td>Tom</td>
                        <td>18</td>
                        <td>男</td>
                        <td>101</td>
                        <td><button class="btn-danger">删除</button>    <button class="btn-success">编辑</button></td>
                    </tr>

                    <tr>
                        <td>Jack</td>
                        <td>19</td>
                        <td>男</td>
                        <td>102</td>
                        <td><button class="btn-danger">删除</button>    <button class="btn-success">编辑</button></td>

                    </tr>


                    <tr>
                        <td>Jerry</td>
                        <td>20</td>
                        <td>女</td>
                        <td>103</td>
                        <td><button class="btn-danger">删除</button>    <button class="btn-success">编辑</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="shade1 hide1"></div>
<div class="model1 hide1">
    <h3 class="text-center">添加学生信息</h3>

    <form action="" class="form-horizontal">
        <div class="form-group">
            <label  class="col-sm-3 control-label">姓名</label>
            <div class="col-sm-6">
                <input class="col-sm-2 form-control item" type="text" >
            </div>
        </div>

        <div class="form-group">
            <label  class="col-sm-3 control-label">年龄</label>
            <div class="col-sm-6">
                <input class="col-sm-2 form-control item" type="text" >
            </div>
        </div>

        <div class="form-group">
            <label  class="col-sm-3 control-label">性别</label>
            <div class="col-sm-6">
                <input class="col-sm-2 form-control item" type="text" >
            </div>
        </div>

        <div class="form-group">
            <label  class="col-sm-3 control-label">班级</label>
            <div class="col-sm-6">
                 <input class="col-sm-2 form-control item" type="text" >
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="button" class="btn btn-default" id="subBtn" value="submit">
            </div>
        </div>
    </form>
</div>

<script src="jquery-3.1.1.js"></script>

<script>

//    删除及委派
    $("#bb1").on("click",".btn-danger",function(){
        $(this).parent().parent().remove()
    })


//添加
    $(".btn-primary").click(function(){
        $(".shade1").show();
        $(".model1").show();
    })

    $("#subBtn").click(function(){
//        关闭对话框
        $(".shade1").hide();
        $(".model1").hide();

//        获取用户输入值
        var arr=[];

        $(".item").each(function(){
            arr.push($(this).val());

        });

//        构建tr标签
        var s='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td>'+arr[3]+'</td><td><button ' +
        'class="btn-danger">删除</button> <button class="btn-success">编辑</button></td></tr>'

        $("#bb1").append(s)

    })


//    编辑及委派
//    $("#bb1").on("click",".btn-success",function(){
//        $(this).
//    })
</script>


</body>
</html>
复制代码

 

posted on 2019-05-14 09:06  斜阳红红  阅读(211)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3