bootsrap 前端页面+th标签

最新推荐文章于 2022-12-13 02:59:47 发布
最新推荐文章于 2022-12-13 02:59:47 发布
阅读量797 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmz0217/article/details/75136759
版权 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
</head>
<body>
<!--新增模态框-->
<div class="modal fade" id="user_add_modal" 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_add">添加学生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addForm" action="/add" method="post">
                    <div class="form-group">
                        <label for="userName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="userName" class="form-control" id="userName" placeholder="UserName" οnblur="findUserByName_add()">
                             <span id="un"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control" id="pwd" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userMoney" class="col-sm-2 control-label">身价</label>
                        <div class="col-sm-10">
                            <input type="text" name="userMoney" class="form-control" id="userMoney" placeholder="Money">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userEmail" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="userEmail" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="genderRadio1" checked="checked" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="genderRadio2" value="女"> 女
                            </label>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学院</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="gid">
                                <option value="" selected="selected">--请选择--</option>
                                <option value="">移动通信</option>
                                <option value="">网工</option>
                                <option value="">云计算</option>
                                <option value="">软工</option>
                                <option value="">传媒</option>
                            </select>
                        </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" οnclick="save()" id="btSave">保存</button>
            </div>
        </div>
    </div>
</div>
<!--修改模态框-->
<div class="modal fade" id="user_update_modal" 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_update">编辑学生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateForm" action="/add" method="post">
                    <input type="hidden" name="userId" id="set_userId">
                    <div class="form-group">
                        <label for="userName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="userName" class="form-control" id="set_userName" placeholder="UserName" οnclick="findUserByName_update()">
                            <span id="name"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control" id="set_pwd" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userMoney" class="col-sm-2 control-label">身价</label>
                        <div class="col-sm-10">
                            <input type="text" name="userMoney" class="form-control" id="set_userMoney" placeholder="Money">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userEmail" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="set_userEmail" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="set_genderRadio1" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="set_genderRadio2" value="女"> 女
                            </label>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学院</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="gid">
                                <option value="" selected="selected">--请选择--</option>
                                <option value="">移动通信</option>
                                <option value="">网工</option>
                                <option value="">云计算</option>
                                <option value="">软工</option>
                                <option value="">传媒</option>
                            </select>
                        </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" οnclick="update()" id="btUpdate">编辑</button>
            </div>
        </div>
    </div>
</div>
      <div class="container">
          <!--标题-->
           <div class="row">
               <div class="col-md-12">
                   <h1>学生管理系统</h1>
               </div>
           </div>
          <!--滚动条-->
          <div class="row">
              <div class="col-md-8">
                  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                          <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                      </ol>
                      <div class="carousel-inner" role="listbox">
                          <div class="item active">
                              <img src="img\1499756675.jpg">
                              <div class="carousel-caption">
                              </div>
                          </div>
                          <div class="item">
                              <img src="img\1499741313.jpg">
                              <div class="carousel-caption">
                              </div>
                          </div>
                          <div class="item">
                              <img src="img\1499739812.jpg">
                              <div class="carousel-caption">
                              </div>
                          </div>
                          <div class="item">
                              <img src="img\1499690136.jpg">
                              <div class="carousel-caption">
                              </div>
                          </div>
                          <div class="item">
                              <img src="img\1499668049.jpg">
                              <div class="carousel-caption">
                              </div>
                          </div>

                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                      </a>
                  </div>
              </div>
          </div>
          <!--按钮-->
          <div class="row">
              <div class="col-md-4 col-md-offset-10">
                  <button class="btn btn-primary" id="addModal" οnclick="f1()">新增</button>
                  <button class="btn btn-danger" id="exportMsg" οnclick="exportAll()" disabled="disabled">导出</button>
              </div>

          </div>
          <!--表格-->
          <div class="row">
              <div class="col-md-12">
                  <table class="table table-hover">
                      <thead>
                      <tr align="center">
                          <th>
                              <label class="checkbox-inline">
                                  <input type="checkbox" id="chickAll" οnclick="chickAll()"/>全选
                              </label>
                          </th>
                          <th>编号</th>
                          <th>姓名</th>
                          <th>身价</th>
                          <th>性别</th>
                          <th>Email</th>
                          <th>密码</th>
                          <th>操作</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr th:each="user:${users}">
                          <td>
                              <label>
                                  <input type="checkbox" name="blankCheckbox" th:value="${user.userId}" />
                              </label>
                          </td>
                          <td th:text="${user.userId}">-</td>
                          <td th:text="${user.userName}">-</td>
                          <td th:text="${#numbers.formatDecimal(user.userMoney,1,2)}">0.00</td>
                          <td th:text="${user.gender}">-</td>
                          <td th:text="${user.email}">-</td>
                          <td th:text="${user.password}">-</td>
                          <td>
                              <button class="btn btn-primary btn-sm" th:value="${user.userId}" data-toggle="modal" data-target="#user_update_modal" οnclick="findUserById(this)">
                                  <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>
                                  编辑
                              </button>
                              <button class="btn btn-danger btn-sm"  th:value="${user.userId}" οnclick="deleteUser(this)">
                                  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                  删除</button>
                          </td>
                      </tr>
                      </tbody>
                  </table>
              </div>
          </div>
              <!--分页文字-->
              <div class="col-md-6" >
                  当前第 1 页,共 1 页，总共 3 条记录

                  <!--分页按钮-->
              </div>
              <div class="col-md-6">
                      <nav aria-label="Page navigation">
                          <ul class="pagination">
                              <li><a href="#">首页</a></li>
                              <li>
                                  <a href="#" aria-label="Previous">
                                      <span aria-hidden="true">&laquo;</span>
                                  </a>
                              </li>
                              <li><a href="#">1</a></li>
                              <li><a href="#">2</a></li>
                              <li><a href="#">3</a></li>
                              <li><a href="#">4</a></li>
                              <li><a href="#">5</a></li>
                              <li>
                                  <a href="#" aria-label="Next">
                                      <span aria-hidden="true">&raquo;</span>
                                  </a>
                              </li>
                              <li><a href="#">末页</a></li>
                          </ul>
                      </nav>
                  </div>
          </div>
      </div>
<script src="..\js\index.js"></script>
<script src="..\bootstrap-3.3.7-dist\js\jquery.min.js"></script>
      <script  src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>


---------------------------------------------------------------------------------------------------

js代码
 
function f1(){
    $("#user_add_modal").modal({
        backdrop:"static"
    });
}
function save() {
    $("#addForm").submit();
    $("#user_add_modal").modal('hide');
}
function update() {
    $("#updateForm").submit();
    $("#user_update_modal").modal('hide');
}
function findUserByName_add () {
    var userName=$("#userName").val();
    $.ajax({
        url:"/findUserByName",
        data:{"userName":userName},
        type:"POST",
        dataType:"json",
        success:function(data){
            if(data=='1') {
                $("#un").html("用户名可以使用");
                $("#btSave").removeAttr("disabled");
            } else {
                $("#un").html("用户名已使用");
                $("#userName").focus();
                $("#btSave").attr("disabled","disabled");
            }
        }
    });
}
function findUserByName_update () {
    var set_userName=$("#set_userName").val();
    $.ajax({
        url:"/findUserByName",
        data:{"userName":set_userName},
        type:"POST",
        dataType:"json",
        success:function(data){
            if(data=='1') {
                $("#name").html("用户名可以使用");
                $("#btUpdate").removeAttr("disabled");
            } else {
                $("#name").html("用户名已使用");
                $("#set_username").focus();
                $("#btUpdate").attr("disabled","disabled");
            }
        }
    });
}
function deleteUser(a){
    var userId=a.value;
    $.ajax({
        url:"/deleteUserById",
        data:{"userId":userId},
        type:"POST",
        dataType:"json"
    });
}
function findUserById(o){
    var userId=o.value;
    $.ajax({
        url:"/findUserById",
        data:{"userId":userId},
        type:"POST",
        dataType:"json",
        success:function(data){
            $("#set_userId").val(data.userId);
            $("#set_userName").val(data.userName);
            $("#set_pwd").val(data.password);
            $("#set_userEmail").val(data.email);
            $("#set_userMoney").val(data.userMoney);
            var gender=data.gender;
            if(gender=="男"){
                $("#set_genderRadio1").attr("checked","checked");
            }
            else{
                $("#set_genderRadio2").attr("checked","checked");
            }
        }
    });

}
function chickAll(){
   var chickAll=document.getElementById("chickAll");
    var boxes=document.getElementsByName("blankCheckbox");
    for(var i=0;i<boxes.length;i++){
          if(chickAll.checked==true){
              boxes[i].checked=true;
          }
          else{
              boxes[i].checked=false;
          }
    }
}
function exportAll() {

    var boxes=document.getElementsByName("blankCheckbox");

    var ids="";
    for(var i=0;i<boxes.length;i++){
       if(boxes[i].checked){
           if(ids==""){
              ids+=boxes[i];
           }
           else{
               ids+=","+boxes[i];
           }
       }
    }
    if(ids==""){
        alert("请选择一条记录");
        return false;
    }
    var yOrN=confirm("确定导出这几条记录吗");
    if(yOrN){
        $.ajax({
            url: "/exportMsg",
            data: {"ids": ids},
            type: "POST",
            dataType: "json"
        });
    }
    return false;
}

大d大a侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap标签
秋城落叶的博客
03-31 287
可用的变体 用下面的任何一个类即可改变标签的外观。 样式(悬停可选中) 说明 label label-default 默认标签 label label-primary 强调标签 label label-success 成功标签 label label-info 信息标签 label label-warning 警告标...
前端BootStrap与LayUI框架
qq_52992141的博客
11-05 1168
前端BootStrap与LayUI
前端 ＜table＞＜td＞＜tr＞＜th＞
技术分享，共同进步
07-10 468
代码: <html> <body> <table width="500" > <caption align="top">门诊收费统计汇总单<br></caption> </table> <table width="500" border=1> <tr> <th>总收费次数</th> <th>(开始)收费日期</th> &l
th div样式控制_bootstrap学习心得总结-css样式设计分享
weixin_39645003的博客
12-03 346
由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。一：bootstrap是什么？bs是什么? 即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。二：c...
前端学习2——html
qq_38393535的博客
04-05 548
前端学习2——html表格创建表格表格属性表头单元格标签th表格标题caption合并单元格合并单元格两种方式合并单元格顺序合并单元格三部曲表格划分结构列表无序列表ul有序列表ol自定义列表dl表单input控件label标签textarea控件select下拉菜单form表单域 表格 创建表格 表格语法 <table> <tr> <!-- 行标签 --> <td> <!-- 一个代表一个单元格 --> 单元格内的文字 &l
Bootstrap的基本使用方法，5分钟帮你搞懂怎么用
当代码遇上音乐
03-28 5万+
作为Web开发的Coder，是不是很对浏览器兼容性，各种移动设备适配都很头大，所以我们有必要学习一下当下主流的一个Html5框架，即Bootstrap！
解决bootstrap表格里的th文字右对齐失效问题
1002710030
11-13 838
右对齐无效 <th align="right"></th> 右对齐有效 <th style="text-align:right"></th>
本地网站实例（猪周期数据展示）：python+MySQL+Django+BootStrap+JavaScript+echart
最新发布
成长的韭皇
12-13 485
django开发web本地网站
springboot+thymeleaf+bootstrap时页面显示不出来
one_piece68的博客
11-12 1198
首先导入依赖 <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.5</version> </dependency> <dependenc...
springboot入门级项目（一）学生管理系统（springboot+mybatis+bootstrap+thymeleaf）
m0_67393593的博客
06-12 912
1、登录页面 ，支持中英文切换 2、学生管理页面，支持增删改查（这里就不演示了，操作时间太长，录制的gif太大，传不上来，直接看主页面） 跟着B站的狂神老师学习了一段时间的springboot，打算写个小项目练练手当做复习（我还是新手）。前端直接用的bootstrap已有的模板。 大家可以看看狂神的员工管理系统：https://www.bilibili.com/video/BV1PE411i7CVp=20学生管理系统资源获取：百度网盘 链接：https://pan.baidu.com/s/10_Ikc0I7
el表达式 写入bootstrap表格数据页面的实例代码
08-31
Bootstrap是一个流行的前端框架，用于快速构建响应式和移动优先的网站，而EL表达式则是JavaServer Pages (JSP) 中用于简化页面数据访问和操作的一种语言。 首先，EL表达式在JSP中的主要作用是获取和设置JavaBeans或...
BootStrap常用的元素与样式
laizhixue的博客
02-02 2588
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 为表格添加基础样式。 表格标题行的容器元素（），用来标识表格列。 表格主体中的表格行的容器元素（）。 一组出现在单行上的表格单元格的容
web前端基础表格笔记
weixin_43887184的博客
04-06 510
1.创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 要深刻体会表格、行、单元格他们的构成。 在上面的语法中包含基本的三对HTML标签，分别为 tab...
HTML <th> 标签 的详细用法
web前端开发教程htmlcssjs
01-05 5797
HTML <th> 标签功能 <th> 标签定义 HTML 表格中的表头单元格。 HTML 表格有两种单元格类型： 表头单元格 - 包含头部信息（由 <th> 元素创建） 标准单元格 - 包含数据（由 元素创建） <th> 元素中的文本通常呈现为粗体并且居中。 元素中的文本通常是普通的左对齐文本。 HTML <th> 标签用法 ...
th:each怎么用，前端的迭代循环，语法：th:each=“goods,goodsStat:${objList}“。
世上哪有什么岁月静好,不过是有人替你负重前行
11-10 6421
th:each属性用于迭代循环，语法：th:each=“obj,iterStat:${objList}” 迭代对象可以是java.util.List,java.util.Map,数组等; iterStat称作状态变量，属性有： index:当前迭代对象的index（从0开始计算） count: 当前迭代对象的index(从1开始计算) size:被迭代对象的大小 current:当前迭代变量 even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算） first:布尔值，当前循环是否是第一个 las
bootStrap select 和 th:each 结合
chuangmao7450的博客
07-20 949
<div class="form-group"><!--for="firstname3" --> <label class="col-sm-2 control-label">生产商</label> ...
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
热门推荐
JAVA
07-12 9万+
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
知识回顾
Cg_Companion_Xi的博客
11-09 1188
** 一．Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT  移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。  浏览器支持：所有的主流浏览器都支持 Bootstrap。  **容易上手：**只要具备 HTML 和...
超级好用的前端模版Thymeleaf 语法总结（全，速收藏）
爱吃早餐的程序员
06-01 671
一、引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影响。 二、输出内容 2.1 <p th:text="#{home.welcome}">Welcome to our grocery store!</...
Java学习中的前端精要：HTML-CSS-JS-Bootstrap
掌握这些前端基础知识，将使Java开发者具备创建交互式Web页面的能力，更好地理解Web应用的全貌，从而提升开发效率和用户体验。在实际项目中，还可能需要学习更多现代前端框架，如React、Vue或Angular，以及相关的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值