jQuery对表格的操作示例

jQuery实现对表格数据进行增加,删除和修改
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>11111111111</title>
        <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>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Alex</td>
                    <td>烫头</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>苑局</td>
                    <td>日天</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="myCover" class="cover hide"></div>
        <div id="myModal" class="modal hide">
            <div>
                <p>
                    <label for="modal-name">姓名</label>
                    <input type="text" id="modal-name">
                </p>
                <p>
                    <label for="modal-habit">爱好</label>
                    <input type="text" id="modal-habit">
                </p>
                <p>
                    <button id="modal-submit">提交</button>
                    <button id="modal-cancel">取消</button>
                </p>
            </div>
        </div>
        <script src="./jquery-3.3.1.min.js"></script>
        <script>
            function showModal() { //定义函数实现显示模态框
                $("#myCover,#myModal").removeClass("hide");
            }
            function closeModal() { //定义函数实现隐藏模态框 
                $("#myCover,#myModal").addClass("hide");
            }
             // --------------------------------------------------------------------------点击编辑按钮------------------------------------------------------------------------
            $("tbody").on("click", ".edit-btn", function() { //事件委托解决新增加的数据没绑定事件
                showModal();
                //    原有的值填到模态框里面
                var $currentEle = $(this).parent().parent();
                var name = $currentEle.children().eq(1).text(); //或者 var name = $(this).parent('td').prev().prev().text();
                var habit = $currentEle.children().eq(2).text(); //或者 var habit = $(this).parent('td').prev().text();
                $("#modal-name").val(name);
                $("#modal-habit").val(habit);
                $("#myModal").data("currenttr", $currentEle); //值保存起来用来判断后面的条件是新增加的还是编辑的模态框
            });
             // -----------------------------------------------------------------------点击新增按钮-------------------------------------------------------------------------
             // 1. 弹出模态框
            $("#add").on("click", function() {
                showModal();
            });
             //-------------------------------------------------------------------------- 删除按钮---------------------------------------------------------------------------
             // 1. 删除当前行
            $("tbody").on("click", ".delete-btn", function() {
                // this指向的是实际触发事件的元素
                $(this).parent().parent().nextAll().each(function() { //当前行后面的所有的tr,依次更新
                    var oldNumber = $(this).children().first().text();
                    $(this).children().first().text(oldNumber - 1); //删除行的后面的序号都减去一
                });
                $(this).parent().parent().remove();
            });
             //------------------------------------------------------------------------ 模态框中有取消按钮-------------------------------------------------------------------
             // 1. 清空模态框中input的值
             // 2. 关闭模态框
            $("#modal-cancel").on("click", function() {
                $("#myModal").find("input").val("");
                //      $("#myModal input").val("");
                closeModal(); //隐藏模态框
            });
             // -----------------------------------------------------------------------------模态框中的提交按钮-----------------------------------------------------------
             // 取到用户的输入
            $("#modal-submit").on("click", function() {
                var name = $("#modal-name").val();
                var habit = $("#modal-habit").val();
                // 1. 判断是新增操作还是编辑操作
                var $currenttrEle = $("#myModal").data("currenttr");
                if ($currenttrEle !== undefined) { //有值,说明是编辑状态
                    $currenttrEle.children().eq(1).text(name);
                    $currenttrEle.children().eq(2).text(habit);
                    $("#myModal").removeData();
                } else {
                    // 如果是新增操作
                    // 1. 创建一个新的tr标签,把用户的数据填进去,再添加到tbody最后
                    var trEle = document.createElement("tr");
                    var number = $("tr").length;
                    $(trEle).html("<td>" + number + "</td>" +
                        "<td>" + name + "</td>" +
                        "<td>" + habit + "</td>" +
                        '<td><button>编辑</button><button>删除</button></td>');
                    $("tbody").append(trEle);
                    $("#myModal").find("input").val(""); //查找效率高
                }
                closeModal(); //关闭模态框
            });
        </script>
    </body>
</html>

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林冠宏的技术文章

Go 实现 自动检索 API 错误码代码行 并 打印成文档,例 markDown 形式等

14230
来自专栏前端菜鸟变老鸟

使用js对在网页中打开Excel表格,并进行自动求和操作。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/detai...

28630
来自专栏Python小屋

使用Python写入docx文件并控制字体颜色

背景知识:docx文件的结构分为三层,1、Docment对象表示整个文档;2、Docment包含了Paragraph对象的列表,每个Paragraph对象用来表...

24640
来自专栏专知

Python网络爬虫与信息抽取笔记06 爬虫实战2

16820
来自专栏Python小屋

使用Python提取JPEG图像文件dpi并计算物理尺寸

感谢浙江省浦江中学方春林老师提供的问题、测试图像和第一版本的代码! 下面的代码需要安装Python图像处理库pillow,由于不同公司对JPEG压缩算法和格式的...

613100
来自专栏Deep learning进阶路

caffe随记(九)---利用FCN和已有的model进行图像语义分割

1、下载caffemodel 本例中我们使用的是pascalcontext-fcn32的模型,这个下载链接在它的文件夹里有,就是url那个文件 下载  pas...

40000
来自专栏帮你学MatLab

期刊要求图片eps格式的输出

期刊图片 部分版本在生成eps文件是会报错,才发现原来这个工具升级了,这是新的下载地址:http://www.mathworks.com/matlabcen...

36060
来自专栏DannyHoo的专栏

iOS开发中QQ好友列表下拉显示全部好友实现思路

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

48120
来自专栏林德熙的博客

WPF 解决弹出模态窗口关闭后,主窗口不在最前

本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口。使用另一个窗口在模态窗口前面。从任务栏打开模态窗口。关闭模态窗口。这时发现,主窗口会在刚才使...

52820
来自专栏程序生活

Leetcode-Easy 72. Edit Distance

72. Edit Distance 描述: 求两个字符串的编辑距离 ? 思路: 动态规划 代码 class Solution: ...

33350

扫码关注云+社区

领取腾讯云代金券