XG白给 2022-04-22 16:46 采纳率: 100%
浏览 367
已结题

集合数据的遍历【EL表达式和JSTL】

某一个班期末考试结束后,需要将"语文、数学、英语"三门课成绩进行统计显示,页面上显示“学号、姓名、语文、数学、英语”5列数据。

1、要求:

通过servlet请求转发到score.jsp页面,score.jsp页面上有增删改3个按钮,可以分别点击进行成绩的添加、修改【最好点击弹出框形式添加和修改,可以结合jQuery】和删除;另外页面上还有查询操作,可以输入学号或姓名进行查询。

请用EL表达式和JSTL对集合数据进行遍历显示,并且需要模拟“增删改查”的功能。

2、提示:

集合类型的数据结构自己设计,以方便“增删改查”即可

  • 写回答

5条回答 默认 最新

  • 快乐骑行^_^ 大数据领域新星创作者 2022-04-22 17:49
    关注
    
     
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../static/css/layui.css">
        <link rel="stylesheet" href="../static/css/layer.css">
        <link rel="stylesheet" href="../static/css/laydate.css">
    </head>
    <body>
     
        <!--搜索条件开始-->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;" >
            <legend>查询条件</legend>
        </fieldset>
     
        <form class="layui-form" action="" method="post" id="formTest">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="学号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
     
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="邮箱" autocomplete="off" class="layui-input">
                    </div>
                </div>
     
                <div class="layui-inline">
                    <label class="layui-form-label">单选框</label>
                    <div class="layui-input-block">
                        <input type="radio" name="性别" value="男" title="男" checked="">
                        <input type="radio" name="性别" value="女" title="女">
                    </div>
                </div>
     
            </div>
     
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="start_time" readonly="readonly" id="start_time" placeholder="yyyy-MM-dd">
                    </div>
                </div>
     
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="endtime" readonly="readonly" id="endtime" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
     
            <div class="layui-form-item" style="text-align: center;">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSubmit" lay-submit="" lay-filter="demo1">查询</button>
                    <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doReset">重置</button>
                </div>
            </div>
     
        </form>
     
        <!--搜索条件结束-->
     
     
        <!--数据表格开始-->
        <div type="text/html" style="display: none" id="userToolBar">
            <a type="submit" class="layui-btn layui-btn-xs" lay-filter="add" lay-event="add">添加</a>
            <a type="submit" class="layui-btn layui-btn-xs" id="batch_del" lay-filter="batch_del" lay-event="batch_del">批量删除</a>
        </div>
     
        <div id="userBar" style="display: none;">
            <a class="layui-btn layui-btn-xs" lay-event="edit" id="modify">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
     
        <table class="'layui-hide" id="userTable" lay-filter="userTable"></table>
        <!--数据表格结束-->
     
        <!--添加和修改弹出层开始-->
            <div style="display:none;padding: 20px" id="addnewdata">
                <form class="layui-form" action="" method="post" lay-filter="dataFrm" id="dataFrm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">学号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="学号" autocomplete="off" class="layui-input">
                                </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
     
                        <div class="layui-inline">
                            <label class="layui-form-label">城市</label>
                            <div class="layui-input-inline">
                                <input type="text" name="城市" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
     
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="性别" value="男" title="男" checked="">
                            <input type="radio" name="性别" value="女" title="女">
                        </div>
                    </div>
     
                    <div class="layui-form-item" style="text-align: center;">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="dosubmit1" lay-submit="" lay-filter="dosubmit1">提交</button>
                            <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doclose" lay-submit="" lay-filter="doclose" lay-event="doclose">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        <!--添加和修改弹出层结束-->
     
        <script src="../static/css/layui.js"></script>
        <script type="text/javascript">
            layui.use(["jquery",'form','element','layer','table','laydate'],function() {
                let $ = layui.jquery;
                let form = layui.form;
                let element = layui.element;
                let layer = layui.layer;
                let table = layui.table;
                let laydate = layui.laydate;
     
                laydate.render({
                    elem: '#start_time',
                    type: 'datetime',
                    calendar: 'True'
                });
     
                laydate.render({
                    elem: '#endtime',
                    type: 'datetime',
                    calendar: 'True'
                });
     
                //渲染数据表格
                var tableIns = table.render({
                    elem: '#userTable', //渲染的目标对象
                    data: [],
                    initSort: {
                        field: '学号',
                        type: 'asc'
                    },
                    title: '用户数据登录表',//数据导出的标题
                    page: true,//是否启动分页
                    toolbar: "#userToolBar",//表格的工具条
                    defaultToolbar: ['filter', 'exports', 'print'],
                    hight: "full-300",
                    down: function (res, curr, count) {
                        alert(res);//后台url返回的json串
                        alert(curr);//当前页
                        alert(count);//数据总条数
                    },
                    //totalRow:true,//开启合并行
                    limit: 30,//设置每页显示的条数,默认为10
                    //limits:[20,40,60,80],
                    loading: true,
                    //text: {
                    //    none: "未查询到数据"  //默认无数据
                    //},
                    cols: [
                        [{title: '数据表格增删改查', align:'center', colspan: 15}],
                        [ //列表数据
                        {type: 'checkbox', fixed: 'left'},
                        {field: '学号', title: '学号', sort: true}, //field设定字段名,title设定标题名称,sort排页面已有数据
                        {field: '姓名', title: '姓名', edit: true, align: 'center'},//edit可编辑
                        {field: '邮箱', title: '邮箱', align: 'center', edit: 'text', width: 300},
                        {field: '性别', title: '性别', align: 'center', edit: 'text', sort: true},
                        {field: '城市', title: '城市', align: 'center'},
                        {fixed: 'right', title: '操作', align: 'center', toolbar: "#userBar"}
                    ]]
     
                });
     
            })
     
        </script>
    </body>
     
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 5月2日
  • 已采纳回答 4月24日
  • 创建了问题 4月22日