jQuery实现表的编辑删除添加(增删改查)

最新推荐文章于 2023-12-24 18:00:00 发布
转载最新推荐文章于 2023-12-24 18:00:00 发布 · 131 阅读
1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ugfly/p/7688284.html
文章标签：
#javascript #开发工具 #ViewUI
本文介绍了一个使用Bootstrap构建的后台管理模板示例，该模板包括导航栏、侧边栏菜单及表格数据展示等功能，并通过jQuery实现了折叠菜单、数据表格操作及模态框交互。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
代码 : (用到了bootstrap里面的全局css样式和组件,毕竟一把梭.??)

代码很详细.慢慢看.仔细看.
<!DOCTYPE html>
<!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>后台管理Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./Dashboard_files/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <!--<script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]&ndash;&gt;-->
    <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->


    <style>
        .menu {
            margin: 0 -20px;
            border-bottom: 1px solid #336699;
        }

        .head {
            padding: 15px;
        }

        .my-table-tool {
            margin-bottom: 15px;
        }

        .menu .nav-sidebar > li > a {
            padding-right: 40px;
            padding-left: 40px;
        }
    </style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#">后台管理系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">

            <div class="menu">
                <div class="head bg-primary">菜单一</div>
                <ul class="nav nav-sidebar">
                    <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#">Overview <span
                            class="sr-only">(current)</span></a>
                    </li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
                </ul>
            </div>

            <div class="menu">
                <div class="head  bg-primary">菜单二</div>
                <ul class="nav nav-sidebar">
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
                </ul>
            </div>

            <div class="menu">
                <div class="head  bg-primary">菜单三</div>
                <ul class="nav nav-sidebar">
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                </ul>
            </div>


        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-primary">
                <div class="panel-heading">后台管理系统</div>
                <div class="panel-body">

                    <!-- 表格上面的按钮-->

                    <div class="row my-table-tool">
                        <div class="col-md-12">
                            <div style="float: left;margin-bottom:10px;">
                                <input type="text" class="form-control" placeholder="搜索">
                            </div>
                            <button type="submit" class="btn btn-primary">搜索</button>
                            <button type="button" class="btn pull-right btn-primary" data-toggle="modal"
                                    data-target="#myModal">添加
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive table-bordered">
                        <table id="t1" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>用户名</th>
                                <th>年龄</th>
                                <th>爱好</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>碧池肖</td>
                                <td>18</td>
                                <td>gay</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-primary">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>娜扎</td>
                                <td>6</td>
                                <td>甘地</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-primary">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td> 加藤</td>
                                <td>17.9</td>
                                <td>开车</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-primary">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>路宁彪婊</td>
                                <td>7</td>
                                <td>发光的帽子</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-primary">删除</button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>


<!--模态框开始 -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">操作</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="modal-username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modal-username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="modal-age" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-habit" class="col-sm-2 control-label">爱好</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modal-habit" placeholder="爱好">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束 -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="Dashboard_files/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="Dashboard_files/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="Dashboard_files/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>

<script>
    $(document).ready(function () {
        $('.head').on('click', function () {
            //找到menu的兄弟的儿子,关起来
            $(this).parent().siblings().children('ul').slideUp();
            //.head下一个兄弟标签是ul, 来让它隐藏或者显示
            $(this).next().slideToggle();
        });

        //删除
        $('tbody').on('click', 'td>.btn-primary', function () {
            $(this).parent().parent().remove()
        });
        //编辑
        $('tbody').on('click', 'td>.btn-warning', function () {
            //弹出模态框
            $('#myModal').modal('show');
            //给模态框赋值
            //1.取值
            var tds = $(this).parent().parent().children();
            console.log(tds);
            var username = tds.eq(1).text();
            var age = tds.eq(2).text();
            var habit = tds.eq(3).text();
            //2.赋值
            $('#modal-username').val(username);
            $('#modal-age').val(age);
            $('#modal-habit').val(habit);

            // 把tds保存到myModal的data
            $('#myModal').data({'tds': tds})  //上下有关联吗?
        });

        //点击模态框的提交按钮
        $(".modal-footer>.btn-primary").click(function () {
            $('#myModal').modal('hide');
//            console.log(tds);
            //更新td的值
            //1. 取值
            var username = $('#modal-username').val();
            var age = $('#modal-age').val();
            var habit = $('#modal-habit').val();
            //2. 赋值
            var tds = $('#myModal').data('tds');
            if (tds === undefined) {

                //添加 1.取值,2 在表格添加一行新的tr
                var trCreate = document.createElement('tr');
                //第一个td是id
                $(trCreate).append('<td>' + ($('tbody tr').length + 1) + '</td>');

                $(trCreate).append('<td>' + username + '</td>');
                $(trCreate).append('<td>' + age + '</td>');
                $(trCreate).append('<td>' + habit + '</td>');

                $(trCreate).append($('tbody tr:first').find('td').last().clone());
                $('tbody').append(trCreate);
            } else {
                tds.eq(1).text(username);
                tds.eq(2).text(age);
                tds.eq(3).text(habit);
                //清空tds
                $('#myModal').removeData('tds');  //为什么要清空
            }
        });
        //添加按钮绑定事件
        $('.my-table-tool .btn-primary').click(function () {
            $('#myModal :input').val('')
        })
    })
</script>
</body>
</html>
转载于:https://www.cnblogs.com/ugfly/p/7688284.html