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

最新推荐文章于 2022-05-20 23:26:46 发布
最新推荐文章于 2022-05-20 23:26:46 发布
阅读量4.7k 收藏 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
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootStrap-table(五) 页面刷新及表单回显
kaleldo的博客
11-23 2785
效果图 &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; ..
python测试开发django-126.bootstrap-table表格内操作按钮(修改/删除) 功能实现
qq_27371025的博客
09-14 2397
前言 在 table 表格每一项后面添加操作按钮：修改/删除 希望实现效果： 1、点表格后面的修改按钮，能修改对应行的数据 2、点表格后面的删除按钮，删除对应的行 操作栏 先定义操作栏按钮 // 作者-上海悠悠 QQ交流群:717225969 // blog地址 https://www.cnblogs.com/yoyoketang/ <script> var url = '/teacher/info'; var columns = [ {
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
python测试开发django-120.bootstrap-table表格添加操作按钮(查看/修改/删除)
qq_27371025的博客
09-13 1111
前言 在table表格每一项后面添加3个操作按钮：查看/修改/删除，实现效果 新增操作项 接着前面这篇https://www.cnblogs.com/yoyoketang/p/15242055.html 在columns最后添加一个操作项,formatter属性可以帮助我们更加灵活的显示表格中的内容 # 作者-上海悠悠 QQ交流群:717225969 # blog地址 https://www.cnblogs.com/yoyoketang/ var columns = [ {
Bootstrap Table 增删改总结，
weixin_44594300的博客
08-08 2382
通过网上查了查资料，自己测试，记录一下自己对Bootstrap Table的新得。 刚入行，萌新，还望大佬们指教，嘻嘻。 示例图放两张吧先，哒家~~ 行内编辑 1引入主要文件 bootstrap.min.js bootstrap.min.css bootstrap-table.js bootstrap-table-zh-CN.js 可实现增删改查 引入以上即可 （其他实用插件） 可以自己百度...
BootstrapTable本地添加、删除、修改数据
热门推荐
duansamve的博客
04-29 1万+
BootstrapTable本地添加、删除、修改数据
bootstrap模态框关闭后清除模态框的数据方法
10-18
今天小编就为大家分享一篇bootstrap模态框关闭后清除模态框的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
BootStrap 模态框实现刷新网页并关闭功能
08-31
本篇文章将详细介绍如何利用Bootstrap模态框实现刷新网页并关闭的功能，以及如何禁用空白处点击关闭模态框。 首先，我们需要了解Bootstrap模态框的事件绑定机制。Bootstrap提供了多种与模态框相关的事件，包括`show...
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
08-29
总之，通过在按钮上添加`data-dismiss="modal"`属性，我们可以轻松地实现Bootstrap模态框的自动关闭。对于需要在保存操作完成后关闭模态框的情况，可以结合JavaScript进行处理。无论是在前端还是后端验证通过后，都...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
项目完成后，用户可以在浏览器中看到一个带有搜索、排序功能的表格，通过jQuery实现的增删改查按钮，可以无刷新地对数据进行操作，同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说，这个项目是一个典型...
bootstrap模态框实现拖拽效果
08-31
Bootstrap模态框（Modal）是一种常见的网页交互元素，它允许用户在不离开当前页面的情况下查看或操作额外的信息。在某些情况下，特别是在复杂布局中，模态框可能会被其他元素遮挡，这时就需要实现模态框的拖拽功能，...
BootStrap实现带有增删改查功能的表格(DEMO详解)
lgxzzz的博客
08-20 3818
前言 bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。 表格封装了3个版本，接下来给大家展示一下样式和代码。 版本一 1. 样式 表格布局： 添加：添加一行新的空白代码 修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。 2.代码
Boostrap模态框，以及通过jquery绑定td的值，使模态框回显
weixin_30745553的博客
12-22 851
做页面不管是登录或是修改信息，难免会使用到模态框，在此分享一个比较漂亮的模态框Boostrap模态框 使用之前首先导入jquery-3.2.1.min.js，和bootstrap.min.js 先添加个触发标记：data-toggle="modal" data-target="#myModal"； 如下所示： <a title="编辑" href="javascript:;...
html 实现表格搭配bootstrap模态窗的提交&回显
ShadowSolar的博客
08-02 624
本页面实现了： 1.点击表格tr行的操作按钮，弹出模态窗 2.表格内容会显示到模态窗上（回显） 3.在模态窗编辑，提交后会更改表格的值，且模态窗关闭 需要： bootstrap（v4.6这是我使用的，低版本也ok）的模态窗 Jquery的方法需要了解： children() parents() val() text() click() <!doctype html> <html lang="en"> <head> <!-- Required me
Bootstrap Table行内添加/行内编辑案例 | Bootstrap Table 行内添加/行内编辑 Demo
Vin Cente
08-10 1789
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes,
BootStrap Table使用小结
weixin_30666401的博客
11-07 2519
1、在当前表格的最后新增数据 $("#data_module_table").bootstrapTable('append', data.data);//data.data----->新增的数据 2、在当前表格的首行新增数据 $("#data_module_table").bootstrapTable('prepend', data.data);//data.data---...
jQuery+Bootstrap表格数据增删改查
ICode联盟
05-20 724
下载地址 基于jQuery+Bootstrap实现表格内数据的添加、删除、修改、查找数据。 dd:
bootstrap-table 实现表格增删改查，增加行操作
weixin_39994714的博客
08-20 3822
bootstrap、bootstrap-table官网： http://bootstrap-table.wenzhixin.net.cn/documentation/ 分页、增删改查 <!DOCTYPE html> <%@ page language="java" pageEncoding="utf-8" %> <% String path = requ...
bootstrap表格 行编辑状态_bootstrap table单元格新增行并编辑
weixin_34036075的博客
12-30 565
table单元格新增行并编辑，具体内容如下需要bootstrap.min.css —— [ Bootstrap ]jquery-1.8.2.min.js —— [ Jquery ]代码新建HTMLfunction save_para_table(){var tableinfo = gettableinfo();alert(tableinfo);}//get table infomationfunc...
使用Bootstrap模态框实现增删改查功能
最新发布
06-10
使用Bootstrap模态框实现增删改查功能一般需要以下步骤： 1. 创建一个Bootstrap模态框，用于添加、编辑或删除数据。 2. 在模态框中添加表单元素，用于输入或展示数据。 3. 使用AJAX技术发送请求到后台，执行对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值