bootstrap按钮控制表格实现增删改，模态框数据回显

最新推荐文章于 2024-09-11 15:20:10 发布
最新推荐文章于 2024-09-11 15:20:10 发布
阅读量4.8k 收藏 19
点赞数 2
分类专栏： 前端 文章标签： bootstrap 表格动态获取数据 bootstrap 模态框数据回显 表格数据增删改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41983443/article/details/90765768
版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/bootstrap-table.css" rel="stylesheet">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <title>Title</title>
    <script>
        $(document).ready(function () {
            var x=" ";
            var users = [
                { "id":"1","name":"roob" ,"password":"123" ,"isAdmin":"1"},
                { "id":"2","name":"goog" , "password":"456" ,"isAdmin":"0"},
            ];
            for (i in users) {
              x="<tr><td>" +"<input type='checkbox'/>"+ "</td>"+"<td>"+users[i].id+"</td>"+"<td>" +users[i].name+ "</td>"+"<td>" +users[i].password + "</td>"+"<td>" +users[i].isAdmin + "</td></tr>";
                $("#tb").append(x);
            }
        })
        //发送一个 HTTP POST 请求页面并获取返回内容
        // $(document).ready(function(){
        //     $("#button1").click(function(){
        //         $.post("/try/ajax/demo_test_post.php",{
        //                 name:"菜鸟教程",
        //                 url:"http://www.runoob.com"
        //             },
        //             function(data,status){
        //                 alert("数据: \n" + data + "\n状态: " + status);
        //             });
        //     });
        // });
        //保存用户信息
        function saveUser() {
            $.ajax({
                url: "http//:wwww.baidu.com",//获取数据的URL
                data:$(".fm").serialize(),//前端将数据给后端
                type: "POST",//HTTP请求方法
                dataType : 'JSON',//获取数据执行方式
                success:function(data){
                    if(data.status == 'True'){//传入为JSON对象格式
                        alert('连接成功');
                    }
                    else{
                        $("#labletip").show();
                    }
                },
                error:function(err){
                    alert('连接失败');
                }
            });
        }

        function editUser(){//data-toggle="modal"  data-target="#myModal-1"    //模态框
            var vals = [];
           // var x=0;//记录选中的数据下标值，从0开始
            $('input:checkbox:checked').each(function (index, item) {
                vals.push($(this).val());
            }
            );
            if(vals.length<1||vals.length>=2) {
                $("#editButton").removeAttr("data-target");

                //$("editButton").removeAttr("data-target");
                alert("请选择一条数据");
            } else {
                //回显数据
                var userArr=new Array();
                var i=0;
                $('input:checkbox:checked').parent().siblings().each(function (index) {
                    //userArr[i++].push($(this).val());
                    userArr[i++]=$(this).text()
                    //alert($(this).text());
                })//id="username-1"
                // $("#myModal-1").find("input").each(function () {
                //     if($(this)[i])
                // })
                //var y=userArr[1];
                $("input[id='username-1']").val(userArr[1]);
                $("input[id='pwd-1']").val(userArr[2]);
                $("input[id='addre-1']").val(userArr[3]);
                //数据显示在模态框
                $("#editButton").attr("data-target","#myModal-1");

            }
        };
        //删除用户
        function deleteUser() {
            var vals = [];
            $('input:checkbox:checked').each(function (index, item) {
                    vals.push($(this).val());
                }
            );
            if(vals.length<1) {
                //$("#editButton").removeAttr("data-target");

                //$("editButton").removeAttr("data-target");
                alert("请至少选择一条数据");
            }
            else{
                var userArr=new Array();
                var i=0;
                $('input:checkbox:checked').parent().siblings().each(function (index) {
                    //userArr[i++].push($(this).val());
                    userArr[i++]=$(this).text()
                    //alert($(this).text());
                })//id="username-1"
                // $("#myModal-1").find("input").each(function () {
                //     if($(this)[i])
                // })
                //var y=userArr[1];
                alert("要删除数据的id为："+userArr[0]);

            }

        }

    </script>
</head>
<body>

    <!--工具栏-->
    <div class="toolbar" style="height: 100px">
        <ul class="nav nav-pills">
            <li role="presentation" class="active" >
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" ><i class="glyphicon glyphicon-plus-sign"></i>
                新增
                </button>
            </li>
            <li role="presentation"class="active">
                <button id="editButton" onclick="editUser()" type="button" class="btn btn-primary btn-lg" data-toggle="modal"><i class="glyphicon glyphicon-edit"></i>
                修改
                </button>
            </li>
            <li role="presentation"class="active">
                <button id="deleteButton" onclick="deleteUser()" type="button" class="btn btn-primary btn-lg" data-toggle="modal"><i class="glyphicon glyphicon-remove"></i>
                删除
                </button>
            </li>
            <li role="presentation" class="active dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="width:110px;height: 46px ">
                    操作设置<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    ...
                </ul>
            </li>
        </ul>
    </div>
    <!--显示表格-->
    <div>
        <table class="table table-striped" id="tb">
            <tr>
                <th>选中</th><th>id</th><th>用户名</th><th>密码</th><th>是否管理员</th>
            </tr>

        </table>
    </div>
    <!-- Modal 添加模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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>
                    <h2 class="modal-title" id="myModalLabel">新增用户信息</h2>
                </div>
                <div class="modal-body">
                    <form class="fm">
                        <table class="table table-hover table-bordered">
                            <tr>
                                <th>用户名</th>
                                <td><input type="text" name="username" class="form-control" id="username" /></td>
                            </tr>
                            <tr>
                                <th>密码</th>
                                <td><input type="password" name="password" class="form-control" id="pwd" /></td>
                            </tr>
                            <tr>
                                <th>是否管理员</th>
                                <td><input type="text" name="idAdmin" class="form-control" id="addre" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="button1" class="btn btn-primary" onclick="saveUser()" >Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 编辑模态框-->
    <div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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" id="myModalLabel-1">编辑用户信息</h4>
                </div>
                <div class="modal-body">
                    <form class="fm">
                        <table class="table table-hover table-bordered">
                            <tr>
                                <th>用户名</th>
                                <td><input type="text" name="username" class="form-control" id="username-1" /></td>
                            </tr>
                            <tr>
                                <th>密码</th>
                                <td><input type="password" name="password" class="form-control" id="pwd-1" /></td>
                            </tr>
                            <tr>
                                <th>是否管理员</th>
                                <td><input type="text" name="idAdmin" class="form-control" id="addre-1" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="button1-1" class="btn btn-primary" onclick="saveUser()" >Save changes</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
破晓小v
关注
专栏目录
bootStrap-table(五) 页面刷新及表单回显
kaleldo的博客
11-23 2831
效果图 &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.thymeleaf.org "&gt; &lt;head&gt; ..
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
08-29
总之，通过在按钮上添加`data-dismiss="modal"`属性，我们可以轻松地实现Bootstrap模态框的自动关闭。对于需要在保存操作完成后关闭模态框的情况，可以结合JavaScript进行处理。无论是在前端还是后端验证通过后，都...
Boostrap模态框，以及通过jquery绑定td的值，使模态框回显
weixin_30745553的博客
12-22 868
做页面不管是登录或是修改信息，难免会使用到模态框，在此分享一个比较漂亮的模态框Boostrap模态框 使用之前首先导入jquery-3.2.1.min.js，和bootstrap.min.js 先添加个触发标记：data-toggle="modal" data-target="#myModal"； 如下所示： <a title="编辑" href="javascript:;...
bootstrapTable实现表格内数据的添加、删除、修改、查询
最新发布
jnfy的博客
09-11 313
bootstrapTable实现表格内数据的添加、删除、修改、查询
Bootstrap可编辑表格
_执着_的博客
10-16 4万+
1.说明 继续送福利了，居于Bootstrap可编辑表格，编辑框支持下拉和日期，先上图看下效果，如图1： 这是居于bootstrap-table进行扩展的功能，bootstrap-table的使用这边就不多说了，日期控件用的是bootstrap-datetimepicker，下拉控件bootstrap-select 这个是小编自己写的 bootstrap-table API地址：ht
Bootstrap_表单
weixin_30856965的博客
01-22 181
Bootstrap表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。...
BootStrap实现带有增删改查功能的表格(DEMO详解)
lgxzzz的博客
08-20 3988
前言 bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。 表格封装了3个版本，接下来给大家展示一下样式和代码。 版本一 1. 样式 表格布局： 添加：添加一行新的空白代码 修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。 2.代码
bootstrap模态框关闭后清除模态框的数据方法
10-18
具体来说，在Bootstrap模态框关闭后清除数据，可以通过jQuery来实现。在使用jQuery移除模态框的`bs.modal`数据之前，需要确保页面已经加载了jQuery库以及Bootstrap的相关JavaScript组件库。接着，可以利用jQuery的...
实例详解BootStrap的动态模态框及静态模态框
10-18
在实现模态框时，需要注意的是模态框的结构，它通常由几个部分组成：模态框头部（包含关闭按钮）、模态框内容区域和模态框底部（通常包含操作按钮）。这些部分通过特定的class标识，在Bootstrap的样式表中定义了相应...
BootStrap 模态框实现刷新网页并关闭功能
08-31
本篇文章将详细介绍如何利用Bootstrap模态框实现刷新网页并关闭的功能，以及如何禁用空白处点击关闭模态框。 首先，我们需要了解Bootstrap模态框的事件绑定机制。Bootstrap提供了多种与模态框相关的事件，包括`show...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
项目完成后，用户可以在浏览器中看到一个带有搜索、排序功能的表格，通过jQuery实现的增删改查按钮，可以无刷新地对数据进行操作，同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说，这个项目是一个典型...
bootstrap table单元格新增行并编辑
12-11
table单元格新增行并编辑，具体内容如下 需要 bootstrap.min.css —— [ Bootstrap ] jquery-1.8.2.min.js —— [ Jquery ] 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> [removed][removed] <script type="text/javascript
vue+element 模态框表格形式的可编辑表单实现
12-29
要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑 <el-form ref=editForm style=margin-right:
【BootStrap】--具有增删改查功能的表格Demo
热门推荐
慢慢的长大
09-14 5万+
bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。
html 实现表格搭配bootstrap模态窗的提交&回显
ShadowSolar的博客
08-02 661
本页面实现了： 1.点击表格tr行的操作按钮，弹出模态窗 2.表格内容会显示到模态窗上（回显） 3.在模态窗编辑，提交后会更改表格的值，且模态窗关闭 需要： bootstrap（v4.6这是我使用的，低版本也ok）的模态窗 Jquery的方法需要了解： children() parents() val() text() click() <!doctype html> <html lang="en"> <head> <!-- Required me
jQuery学习笔记--jqGrid的使用方法(编辑,删除,更新,新增)
web开发自学
10-19 893
早上无意中发现，jqGrid发布了3.6.2版本。查看了一下chang log，居然让我看到了中文包的发布。 前几天正为这事儿头痛，要不要根据grid.local-en.js来汉化一下，没想到居然直接就出中文包了。官方的一般来说比自己做的要好吧。 下载地址：http://www.trirand.com/blog/?page_id=6 下载之后修改自己写的jsp文件中的引用语句 &lt;...
bootstrap-table 实现表格增删改查，增加行操作
weixin_39994714的博客
08-20 3908
bootstrap、bootstrap-table官网： http://bootstrap-table.wenzhixin.net.cn/documentation/ 分页、增删改查 <!DOCTYPE html> <%@ page language="java" pageEncoding="utf-8" %> <% String path = requ...
bootstrap3中模态框的数据编辑使用方法
weixin_30415113的博客
07-13 773
bootstrap3中模态框的数据编辑使用方法 模态框是bootstrap3中比较好用得弹窗控件，这回使用了 说主要的，官方详细教程 http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html ...
使用BootStrap实现邮件列表分页与模态框添加功能
"使用BootStrap实现邮件列表的分页与模态框添加邮件功能的教程" Bootstrap是一款流行的前端开发框架，它提供了丰富的组件和样式，能够帮助开发者快速构建响应式和移动优先的网页。在本教程中，我们将探讨如何利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值