两个-CSDN博客

本文链接：https://blog.csdn.net/gh323093/article/details/78472185
第一个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 250px;
            height: 120px;
            background-image: url("images/ad.jpg");
            display: none;
        }
        .ad span{
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 20px;
            background-image: url("images/h.jpg");
            cursor: pointer;
        }
    </style>
    <script src="../jquery-1.11.1/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
                $(this).parent().fadeOut(1000);
            });
            $(".ad").slideDown(1000, function () {
                $(".ad").slideUp(1000, function () {
                   $(".ad").fadeIn(1000, function () {
                       $(".ad").children("span").click(function () {
                          $(this).parent().fadeOut(1000, function () {
                              alert("执行完毕");
                          });
                       });
                   }) ;
                });
            });
        })
    </script>
</head>
<body>
<div class="ani">孔曰成仁，孟曰取义，唯其义尽，所以仁至。读圣贤书，所学何事？而今而后，庶几无愧。</div>
<div class="ad">
    <span></span>
</div>
</body>
</html>


第二个


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/Check.css" rel="stylesheet">
    <script src="../jquery-1.11.1/jquery-1.11.1.min.js"></script>
    <script>
        jQuery(function () {
            //需求1：点击按钮显示遮罩层和添加数据表格
            //需求2：点击里面的关闭按钮隐藏遮罩层和添加数据表格
            //需求3：点击get所在的标签，删除所在的tr
            //需求4：点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中

            //需求1：点击按钮显示遮罩层和添加数据表格
            $("#j_btnAddData").click(function () {
                //显示遮罩层和j_formAdd这个盒子
                $("#j_mask").show();
                $("#j_formAdd").show();
            });
            //需求2：点击里面的关闭按钮隐藏遮罩层和添加数据表格
            $("#j_hideFormAdd").click(function () {
                //显示遮罩层和j_formAdd这个盒子
                $("#j_mask").hide();
                $("#j_formAdd").hide();
            });
            //需求3：点击get所在的标签，删除所在的tr
            $("a.get").click(function () {
                //删除的是所在的tr。
                $(this).parent("td").parent("tr").remove();
            });
            //需求4：点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中
            $("#j_btnAdd").click(function () {
                //bug1： 内容不能为空
                if($("#j_txtLesson").val() === ""){
                    alert("内容不能为空！");
                    return;
                }
                //全部能容这个成tr嵌套td的形式添加到tbody中
                //获取tr，然后为tr赋值。
                var tr = $("<tr></tr>");
                //赋值
                tr.html('<td>'+$("#j_txtLesson").val()+'</td><td>'+$("#j_txtBelSch").val()+'</td>' +
                    '<td><a href="javascrip:;" class="get">KO</a></td>');
                //在房间tbody中
                $("#j_tb").append(tr);
                //bug3：新产生的tr没有时间绑定
                tr.find("a").click(function () {
                    //删除的是所在的tr。
                    tr.remove();
                });
                //问题代码
//                var str = $("#j_tb").html();
//                str += "<tr><td>111</td></tr>";
//                console.log(str);
//                $("#j_tb").html(str);
//                console.log($("#j_tb").html())

                //显示遮罩层和j_formAdd这个盒子
                $("#j_mask").hide();
                $("#j_formAdd").hide();
                //bug2:设置完毕，清空内容
                $("#j_txtLesson").val("");
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
    </div>
    <table>
        <thead>
        <tr>
            <th>公司名称</th>
            <th>所属单位</th>
            <th>已关注</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>中科技</td>
            <td>产品研发部</td>
            <td><a href="javascrip:" class="get">KO</a></td>
        </tr>
        <tr>
            <td>中石化</td>
            <td>产品市场部</td>
            <td><a href="javascrip:" class="get">KO</a></td>
        </tr>
        <tr>
            <td>中联想</td>
            <td>系统开发部</td>
            <td><a href="javascrip:" class="get">KO</a></td>
        </tr>
        <tr>
            <td>中电子</td>
            <td>产品销售部</td>
            <td><a href="javascrip:" class="get">KO</a></td>
        </tr>
        </tbody>
    </table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>
        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">公司名称:</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入公司名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属单位:</label>
        <input class="txt" type="text" id="j_txtBelSch" value="研发部门">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
</body>
</html>

style文件

* {
    padding: 0;
    margin: 0;
}

.wrap {
    width: 410px;
    margin: 100px auto 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #c0c0c0;
}

th,
td {
    border: 1px solid #d0d0d0;
    color: #404060;
    padding: 10px;
}

th {
    background-color: #09c;
    font: bold 16px "΢���ź�";
    color: #fff;
}

td {
    font: 14px "΢���ź�";
}

td a.get {
    text-decoration: none;
}

a.del:hover {
    text-decoration: underline;
}

tbody tr {
    background-color: #f0f0f0;
}

tbody tr:hover {
    cursor: pointer;
    background-color: #fafafa;
}

.btnAdd {
    width: 110px;
    height: 30px;
    font-size: 20px;
    font-weight: bold;
}

.form-item {
    height: 100%;
    position: relative;
    padding-left: 100px;
    padding-right: 20px;
    margin-bottom: 34px;
    line-height: 36px;
}

.form-item > .lb {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100px;
    text-align: right;
}

.form-item > .txt {
    width: 300px;
    height: 32px;
}

.mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    display: none;
}

.form-add {
    position: fixed;
    top: 30%;
    left: 50%;
    margin-left: -197px;
    padding-bottom: 20px;
    background: #fff;
    display: none;
}

.form-add-title {
    background-color: #f7f7f7;
    border-width: 1px 1px 0 1px;
    border-bottom: 0;
    margin-bottom: 15px;
    position: relative;
}

.form-add-title span {
    width: auto;
    height: 18px;
    font-size: 16px;
    font-family: ����;
    font-weight: bold;
    color: rgb(102, 102, 102);
    text-indent: 12px;
    padding: 8px 0px 10px;
    margin-right: 10px;
    display: block;
    overflow: hidden;
    text-align: left;
}

.form-add-title div {
    width: 16px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 30px;
    line-height: 16px;
    cursor: pointer;
}

.form-submit {
    text-align: center;
}

.form-submit input {
    width: 170px;
    height: 32px;
}