增删改查-bootstrap

最新推荐文章于 2023-07-05 16:30:50 发布

[前端]-小王

最新推荐文章于 2023-07-05 16:30:50 发布

阅读量1.1k

点赞数

分类专栏：常见问题 jQuery-增删改查文章标签： bootstrap jquery html js

本文链接：https://blog.csdn.net/wy080815/article/details/119655061

版权

常见问题同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery-增删改查

1 篇文章 0 订阅

订阅专栏

增删改查-bootstrap

一、Bootstrap 是什么？

示例：Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。

二、直接上demo

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap - 增删改查</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 表格 -->
    <div class="container" style="padding-top: 40px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control swich" />
                </div>
                <div class="col-md-3">
                    <button class="btn btn-danger sreach">搜索</button>
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered text-center">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>89</td>
                <td>
                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                    <button class="btn btn-danger del">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>91</td>
                <td>
                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                    <button class="btn btn-danger del">删除</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>刘一</td>
                <td>80</td>
                <td>
                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                    <button class="btn btn-danger del">删除</button>
                </td>
            </tr>
        </table>
    </div>
    <!-- 修改的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="成绩" class="form-control" id="rescore" />
                        </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 olk" data-dismiss="modal">提交更改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- 增加的模态框 -->
    <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">增加信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="成绩" class="form-control" id="rescore" />
                        </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 aad" data-dismiss="modal">增加信息</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script>

        //删除的功能
        $(document).on("click", ".del", function () {
            $(this).parents("tr").remove()
        })
        //改的功能
        var _this = null
        $(document).on("click", ".rev", function () {
            var _arr = []
            _this = $(this).parents("tr")
            $(this).parents("tr").find("td:not(:last)").each(function () {
                _arr.push($(this).text())
            })
            $("#myModal").find("input").each(function (i) {
                $(this).val(_arr[i])
            })
        })

        $(document).on("click", ".olk", function () {
            var _arr = []
            $("#myModal").find("input").each(function () {
                _arr.push($(this).val())
            })
            _this.find("td:not(:last)").each(function (i) {
                $(this).text(_arr[i])
            })
        })
        //增加的功能
        $(document).on("click", ".aad", function () {
            var _arr = []
            var str = ""
            $("#myModel").find("input").each(function () {
                _arr.push($(this).val())

            })

            str = '<tr><td>' + _arr[0] + '</td><td>' + _arr[1] + '</td><td>' + _arr[2] + '</td><td><button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">删除</button></td></tr>'
            $(".table").append(str)

        })
        //查的功能
        $(".sreach").click(function () {
            var oS = $(".swich").val()
            if (oS.length == 0) {
                alert("请输入点东西")
            } else if ($("table tr td:contains('" + oS + "')").length == 0) {
                alert("找不到数据")
            } else {
                $(".table tr:not(:first)").hide()
                $(".table tr:contains('" + oS + "')").show().find("input").prop("checked", true)
            }

        })
    </script>
</body>
</html>

Bootstrap官网链接：https://v3.bootcss.com/

总结

小伙伴们点赞、收藏、评论是对我最大的支持！！

[前端]-小王

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
增删改查-bootstrap

增删改查-bootstrap文章目录增删改查-bootstrap小伙伴们点赞、收藏、评论是对我最大的支持！！一、Bootstrap 是什么？二、使用步骤1.直接上demoBootstrap官网链接：[https://v3.bootcss.com/](https://v3.bootcss.com/)总结小伙伴们点赞、收藏、评论是对我最大的支持！！提示：以下是本篇文章正文内容，下面案例可供参考一、Bootstrap 是什么？示例：Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变
复制链接

扫一扫