简单页面设计

最新推荐文章于 2023-01-09 10:42:14 发布
最新推荐文章于 2023-01-09 10:42:14 发布
阅读量132 收藏
点赞数 1
文章标签： servlet java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63835662/article/details/126059382
版权 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="static/js/jquery-1.11.3.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-2">
        <button type="button" data-toggle='modal' data-target='#myModal1' class="btn btn-primary">添加</button>
    </div>
    <div class="col-md-10">
        <form class="form-inline">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="usertel">电话</label>
                <input type="tel" class="form-control" id="usertel" placeholder="电话">
            </div>
            <button type="button" class="btn btn-default" οnclick="searchUser()">搜索</button>
        </form>
    </div>
</div>


<table class="table table-bordered">
    <tr>
        <%--            <th>序号</th>--%>
        <th>用户名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>电话</th>
        <th>操作</th>
    </tr>
    <tbody id="tab"></tbody>
</table>


<!-- 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>
                <h4 class="modal-title" id="myModalLabel">用户修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <input id="userId" type="hidden" name="user_id">
                    <div class="form-group">
                        <label for="inputUserName" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUserName" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUserAge" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inputUserAge" placeholder="年龄">
                        </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="sex" id="inlineRadio1" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="inlineRadio2" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUserTel" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUserTel" placeholder="电话">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" οnclick="updateUser()" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<%--用户添加--%>
<div class="modal fade" id="myModal1" 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="myModalLabel1">用户添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputUserName" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUserName1" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUserAge" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inputUserAge1" placeholder="年龄">
                        </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="inlineRadio11" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="inlineRadio21" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUserTel" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUserTel1" placeholder="电话">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" οnclick="addUser()" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        $.ajax({
            url:"user",
            type:"GET",
            dataType:"json",
            data:{"method":"queryUserAll"},
            success:function (data) {
                console.log(data);
                var str="";
                for(var i=0;i<data.length;i++){
                    str+="<tr id='t_"+data[i].id+"'><td>"+data[i].userName+"</td><td>"+data[i].userAge+""
                        +"</td><td>"+data[i].userSex+"</td><td>"+data[i].userTel+""
                        +"</td><td><button type='button' οnclick='deleteUser("+data[i].id+")'>删除</button>"+""
                        +"<button type='button' data-toggle='modal' data-target='#myModal' οnclick='findUser("+data[i].id+")'>修改</button></td></tr>";
                }
                $("#tab").html(str);
            }
        });
    });


    function deleteUser(id) {
        $.ajax({
            url:"user",
            type:"GET",
            data:{"method":"deleteUserById","id":id},
            dataType:"text",
            success:function (data) {
                console.log(data);
                if(data=="success"){
                    //删除成功刷新页面
                    // window.location.reload();
                    $("#t_"+id).remove();
                }
            }
        });
    }

    /**
     * 点击修改按钮，弹出模态框，根据id查询出数据放入模态框中的表单做数据回显
     * @param id
     */
    function findUser(id) {
        $.ajax({
            url:"user",
            type:"GET",
            data:{"method":"queryUserByID","id":id},
            dataType:"json",
            success:function (data) {
                $("#userId").val(data.id);
                $("#inputUserName").val(data.userName);
                $("#inputUserAge").val(data.userAge);
                if(data.userSex=="男"){
                    $("#inlineRadio1").prop("checked",true);
                }else{
                    $("#inlineRadio2").prop("checked",true);
                }

                $("#inputUserTel").val(data.userTel);

            }
        });
    }

    /**
     * 修改完毕后保存
     */
    function updateUser() {
        var id = $("#userId").val();
        var userName = $("#inputUserName").val();
        var userAge = $("#inputUserAge").val();
        var userSex = $('input[name="sex"]:checked').val();
        var userTel = $("#inputUserTel").val();
        var user = {"id":id,"userName":userName,"userAge":userAge,"userSex":userSex,"userTel":userTel,"method":"updateUserById"};

        $.ajax({
            url:"user",
            type:"POST",
            data:user,
            dataType:"text",
            success:function (data) {
                if(data=="success"){
                    window.location.reload();
                }
            }
        });
    }



    /*添加数据*/

    function addUser() {
        var userName = $("#inputUserName1").val();
        var userAge = $("#inputUserAge1").val();
        var userSex = $('input[name="gender"]:checked').val();
        var userTel = $("#inputUserTel1").val();
        var user = {"userName":userName,"userAge":userAge,"userSex":userSex,"userTel":userTel,"method":"addUser"};
        $.ajax({
            url:"user",
            type:"POST",
            data:user,
            dataType:"text",
            success:function (data) {
                if(data=="success"){
                    window.location.reload();
                }
            }
        });
    }

    /*查询用户*/
    function searchUser() {
        var username = $("#username").val();
        var usertel = $("#usertel").val();
        var queryUser = {
            "userName":username,
            "userTel":usertel,
            "method":"searchUser"
        };


        $.ajax({
            url:"user",
            type:"GET",
            dataType:"json",
            data:queryUser,
            success:function (data) {
                console.log(data);
                $("#tab").html("");
                var str="";
                for(var i=0;i<data.length;i++){
                    str+="<tr id='t_"+data[i].id+"'><td>"+data[i].userName+"</td><td>"+data[i].userAge+""
                        +"</td><td>"+data[i].userSex+"</td><td>"+data[i].userTel+""
                        +"</td><td><button type='button' οnclick='deleteUser("+data[i].id+")'>删除</button>"+""
                        +"<button type='button' data-toggle='modal' data-target='#myModal' οnclick='findUser("+data[i].id+")'>修改</button></td></tr>";
                }
                $("#tab").html(str);
            }
        });
    }



</script>
</html>
摘不到棉花摘星星
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简易html页面
04-06
适合初学者学习的一个自己写的html页面，帮助大家了解html标签，帮助初学者学习CSS样式布局
简单网页设计
05-07
采用互联网技术开发的简单的网页设计，
做一个简单的页面——基础
m0_65762277的博客
11-16 356
1.html标签有成双成对的，也有自结束标签2.html中是不区分大小写，但一般用小写居多3.标签可以嵌套，但不可以交叉嵌套4.养成良好的注释习惯，简洁，明了注释也不可以嵌套5.html.css,js都是一种宽泛的语言，它的容错率比较高它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响，而且它改的不一定是你想要的。
简单的网页设计（HTML篇1）
qq_41185288的博客
07-15 1万+
简单的网页设计（HTML篇1） 本节成型网页框架： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>给新月的一封回信</title> </head> <body> <div align...
简单的页面
wwr12138333的博客
06-28 158
随便写点
简单的网页
zhukangle的博客
01-03 2600
add.html 操作mongodb数据库 增加 删除 修改 查找 增 remove.html 操作mongodb数据库
海贼王人物介绍简单网页设计.html
05-25
海贼王人物介绍简单网页设计
html.zip_comfortablesj2_简单网页设计
09-21
简单的动画，链接，可以进行简单的交互，适合初学者学习使用
学生dreamweaver网页设计作业成品-简单动漫网页设计
07-26
作品介绍 小黄人网页设计 5页 无js 带视频带音频 非常好看, 非常适合大学生网页设计大作业, 学生dreamweaver网页设计作业成品,html静态页面源代码 静态网页制作代码【CSS+DIV】 此作品为学生个人主页网页设计题材，...
初写-简单页面设计
qq_38233172的博客
04-07 3849
<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" /> <title>作品1</title> <style> *{margin:0;pad...
简易页面
weixin_46999664的博客
10-14 160
a{ text-decoration: none; color: black; } .clearfix:after{ content: “”; clear: both; display: block; } /header/ .left{ float: left; } .right{ float: right; } .header header .title{ width: 96%; height: 30px; margin-left: 100px; } .header header ...
HTML练习css--制作开心餐厅介绍页面
gengzhi1293443962的博客
10-14 1万+
百度一下,就知道 .a{font-size:12px;color:#00DB00;} .b{font-size:24px;color:#00DB00;} p{font-size:12px;} .c{font-size:18px;color:red;} #d{font-size:12px;color:#2828FF;} 开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打
简单页面表单
蓦然回首
09-04 669
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
简单的HTML登录页面
热门推荐
一个橙子
06-06 3万+
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="utf-8"&gt;     &lt;title&gt;登陆界面&lt;/title&gt;     &lt;style&gt;         html {             background-color: #B5DEF2;  
简单页面设计思路
weixin_46060794的博客
05-08 2414
初次编写网页的思路 下面是我根据视频学习的网页 该网页由多个页面组成，我就以其中的首页页面介绍： 首先在文件夹先建立一个文件用于存放需要用到的图片和对应的css文件，如图所示： 用link将css样式导入到HTML中： <link rel="stylesheet" type="text/css" href="./homepage.css"> 通过观察首页的布局，我们可以发现该页面由页眉，导航栏，导航栏下面的图片，正文，页脚，侧栏等组成。这些都可以看成不同的盒子。我将对每一部分进行介绍。
简单的html多页面设计,简洁网页设计的6种方式
weixin_42099633的博客
06-04 1291
简洁网页设计的6种方式简洁的网站设计一直是近年来网站设计网页设计的趋势但是简洁并不意味着极简主义，网站设计师在进行简洁网站设计时要做到简洁而不简单。简洁的网站设计是去掉了网页中多余的内容和设计，并将设计元素重新组合得到一个外形美观、一目了然，让人心旷神怡网站页面。就跟随百分网小编一起去了解下吧，想了解更多相关信息请持续关注我们应届毕业生考试网!想要做到简洁而不简单并不是一件容易的事情，设计师在网站...
简单的页面标题
长镜头
04-19 183
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;title&gt;goole&lt;/title&gt;
HTML做一个简单的页面（纯html代码）地球专题学习网站
weixin__BJ050106的博客
01-09 1073
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
简单网页设计模板html开源
最新发布
12-26
以下是一个简单的网页设计模板的示例代码： ```html <!DOCTYPE html> 简单网页设计模板 body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } .container {...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值