文档章节

jQuery 作业三个按钮

o
 osc_x4h57ch8
发布于 2018/04/24 15:13
字数 961
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>



作业三个按钮

<!--声明 文档-->
<!DOCTYPE html>
<!--定义字符集-->
<html lang="zh-CN">
<head>
    <!--定义编码格式-->
    <meta charset="UTF-8">
   <!--如果网页打不开设置显示内容,并跳转链接-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--设置标题-->
    <title>就三个按钮的作业讲解</title>
     <!--为了确保适当的绘制和触屏缩放,需要在head标签中添加viewport"元素数据标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--设置风格-->
    <style>
        
        /*隐藏的样式类,默认不显示*/
        .hide {
            display: none;
        }

        /*遮罩层,隐藏的,位置固定,顶部,右边左边,下边,透明度,垂直高度*/
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.8;
            z-index: 999;
        }
/*形式的,位置固定,顶部,左边,高度,宽度,外边距顶部,外边距左边 ,背景颜色,垂直高度*/
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            height: 200px;
            width: 400px;
            margin-top: -100px;
            margin-left: -200px;
            background-color: white;
            z-index: 1000;
        }
    </style>
</head>
<body>

<!--新增按钮-->
<button id="add">新增</button>

<!--表格-->
<table border="1">
    <!--表头-->
    <thead>
    <tr>
        <!--表头数据-->
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <!--表主内容-->
    <tbody>
    <tr>
        <!--表内容的数据-->
        <td>1</td>
        <td>Egon</td>
        <td>街舞</td>
        <td>
            <!--设置编辑按钮和删除按钮-->
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
        </td>
    </tr>
    <tr>
        <!--表内容的数据-->
        <td>2</td>
        <td>Alex</td>
        <td>烫头</td>
        <td>
            <!--设置编辑按钮和删除按钮-->
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
        </td>
    </tr>
    <tr>
        <!--表内容的数据-->
        <td>3</td>
        <td>苑局</td>
        <td>日天</td>
        <td>
            <!--设置编辑按钮和删除按钮-->
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<!--div模块-->
<div id="myCover" class="cover hide"></div>
<!--内部div模块-->
<div id="myModal" class="modal hide">
    <div>
        <p>
            <!--使input标签不变黄-->
            <label for="modal-name">姓名</label>
            <input type="text" id="modal-name">
        </p>
        <p>
            <!--使input标签不变黄-->
            <label for="modal-hobby">爱好</label>
            <input type="text" id="modal-hobby">
        </p>
        <p>
            <!--提交和取消按钮-->
            <button id="modal-submit">提交</button>
            <button id="modal-cancel">取消</button>
        </p>
    </div>
</div>


<!--引入jquery-3.3.1.js-->
<script src="jquery-3.3.1.js"></script>
<script>

 

// 弹出模态框的函数
    function showModal() {
        // 把模态框显示出来
        $("#myCover, #myModal").removeClass("hide");
    }

    // 隐藏模态框的函数
    function hideModal() {
        // 把模态框隐藏起来
        $("#myCover, #myModal").addClass("hide");
        // 清空模态框中input标签的值
        $("#modal-name, #modal-hobby").val("");
    }

    // 新增按钮绑定事件
    $("#add").on("click", function () {
        showModal();
    });

    // 给模态框中的取消按钮绑定事件
    $("#modal-cancel").on("click", function () {
        hideModal();
    });
var $table = $("table");
    // 表格中每一行的删除按钮,绑定事件
    $table.on("click", ".delete-btn", function () {
        // 更新表格中当前行后面每一行的序号
        // 找到当前行后面的每一行
        $(this).parent().parent().nextAll().each(function () {
            // each中的this和外面的this不一样了!
            var num = $(this).children().first().text();
            $(this).children().first().text(num-1);
        });
        // 找到当前行,删除
        $(this).parent().parent().remove();
    });

// 编辑按钮绑定事件
    $table.on("click", ".edit-btn", function () {
        // 显示模态框
        showModal();
        // 把原来的内容填充到模态框中
        // 取到当前编辑的这一行
        var $currentTr = $(this).parent().parent();
        // 将当前编辑行保存到模态框对象中
        $("#myModal").data("key", $currentTr);
        // 1. 取值
        var name = $currentTr.children().eq(1).text();
        var hobby = $currentTr.children().eq(2).text();
        // 填充到模态框
        $("#modal-name").val(name);
        $("#modal-hobby").val(hobby);
    });

    // 点击模态框中的提交按钮
    $("#modal-submit").on("click", function () {
         // 获取模态框中input的值
        var name = $("#modal-name").val();
        var hobby = $("#modal-hobby").val();

        // 如何区分是编辑还是新增
        var $tr = $("#myModal").data("key");

        if ($tr !== undefined){  // 可以简写,这里是为了引出来好理解
            // 是编辑操作
            $tr.children().eq(1).text(name);
            $tr.children().eq(2).text(hobby);
            // 编辑完之后要把之前保存的data删掉
            $("#myModal").removeData("key");
        }else {
            // 就是新增操作
            // 创建一个新的tr标签
            var newTr = document.createElement("tr");
            // 塞td标签
            var num = $("table tr").length;
            var eleStr = "<td>" + num + "</td>";
            eleStr += "<td>" + name + "</td>";
            eleStr += "<td>" + hobby + "</td>";
            eleStr += "<td>" + '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>' + "</td>";
            newTr.innerHTML = eleStr;
            // 将新创建的tr标签追加到table里
            $("tbody").append(newTr);
        }
        // 隐藏模态框
        hideModal();
    })
</script>
</body>
</html>

 



o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

jQuery   jQuery介绍     1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。     2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,...

osc_r8q2esik
2019/02/27
33
0
jQuery

jQuery jQuery介绍     1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。     2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够...

osc_3l8mmxug
2019/09/14
2
0
Jquery+ajax+bootstrap

bootstrap参考:https://v3.bootcss.com/components/#btn-dropdowns 内容回顾: 1.先引入jquery的包 2.入口函数 $(document).ready() $(function(){}) 3.jquery的选择器 $('ul li:eq(1)') 过......

osc_2a5k276k
2018/08/04
1
0
在jQuery中,如何通过其name属性选择元素?

我的网页中有3个单选按钮,如下所示: 在jQuery中,我想在单击这三个按钮中的任何一个时获取所选单选按钮的值。 在jQuery中,我们具有id(#)和class(。)选择器,但是如果我想按名称查找单...

javail
03/11
16
0
jQueryMobile快速入门

what   jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。![mobile-wh...

笔阁
2015/11/16
1.2K
2

没有更多内容

加载失败,请刷新页面

加载更多

为什么从HBase的0.96版本开始,舍弃了-ROOT-文件?

HBase结构的读写流程 (1). HBase0.96版本之前: (2). HBase0.96开始: a. 当客户端获取到.meta文件的位置之后,会缓存.meta.文件的位置 b. 客户端还会缓存HRegion的位置 -ROOT-存在的意义: ...

其乐m
16分钟前
12
0
volatile关键字对 - What is the volatile keyword useful for

问题: At work today, I came across the volatile keyword in Java. 今天的工作中,我遇到了Java中的volatile关键字。 Not being very familiar with it, I found this explanation: 不太熟......

技术盛宴
22分钟前
25
0
golang 封装 mysql 和 redis 连接

Mysql封装 package dbimport ("fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx")var DB *sqlx.DBfunc init(){database, err := sqlx.Op......

开源中国最牛的人
22分钟前
16
0
pdfbox 读取文件报错 java.io.IOException: Page tree root must be a dictionary

pdfbox java.io.IOException: Page tree root must be a dictionary 示例代码 public static void main(String[] args) { try (InputStream sampleInputs = new ClassPathResource("s......

lemos
30分钟前
28
0
整理 Linux下列出目录内容的命令

在 Linux 中,有非常多的命令可以让我们用来执行各种各样的任务。当我们想要像使用文件浏览器一样列出一个目录下的内容时,大家第一时间想到的是 ls 命令。但只有 ls 命令能实现这个目的吗?...

良许Linux
31分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部