【html网页设计】HTML+CSS+JavaScript通用的后台管理系统ui框架模板

时间：2025-03-24 21:47:08
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http:///TR/xhtml/DTD/"> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息管理系统</title> <link rel="stylesheet" type="text/css" href="css/"> </head> <body> <div class="wrapperBox"> <div class="header"> <div class="headerTitle"> <div class="headerLine">学生信息管理系统</div> </div> <div class="headerButton"> <button class="addButton">新增</button> <button id="deleteButton">删除</button> </div> </div> <div class="container"> <table id="containerTable"> <thead class="tableHeaher"> <tr> <th><input type="checkbox"></th> <th>序号</th> <th>学号</th> <th>姓名</th> <th>学院</th> <th>专业</th> <th>年级</th> <th>班级</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody id="tdata"> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">2018112030500</td> <td class="stuName">张三</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">物理学</td> <td class="stuYear">2018</td> <td class="stuClass">1</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">2</td> <td class="stuId">2018112030501</td> <td class="stuName">李四</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">物理学</td> <td class="stuYear">2018</td> <td class="stuClass">1</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">3</td> <td class="stuId">2018112030502</td> <td class="stuName">王五</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">物理学</td> <td class="stuYear">2018</td> <td class="stuClass">1</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">4</td> <td class="stuId">2018112030510</td> <td class="stuName">赵六</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">电子信息工程</td> <td class="stuYear">2018</td> <td class="stuClass">5</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">5</td> <td class="stuId">20181120305117</td> <td class="stuName">张三</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">电子信息工程</td> <td class="stuYear">2018</td> <td class="stuClass">5</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">6</td> <td class="stuId">2018112030520</td> <td class="stuName">张三</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">电子信息工程</td> <td class="stuYear">2018</td> <td class="stuClass">5</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">7</td> <td class="stuId">2018112030601</td> <td class="stuName">王五</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">光学</td> <td class="stuYear">2018</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">8</td> <td class="stuId">2018112030602</td> <td class="stuName">张三</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">光学</td> <td class="stuYear">2018</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">9</td> <td class="stuId">2018112030603</td> <td class="stuName">张三</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">光学</td> <td class="stuYear">2018</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">10</td> <td class="stuId">2018112030604</td> <td class="stuName">张三</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">光电</td> <td class="stuYear">2018</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">2018112030605</td> <td class="stuName">王大大</td> <td class="stuAcademy">应用技术学院</td> <td class="stuMajor">修路</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">2018112030606</td> <td class="stuName">王小小</td> <td class="stuAcademy">物电学院</td> <td class="stuMajor">光电</td> <td class="stuYear">2018</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">张三</td> <td class="stuAcademy">计算机科学与工程学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">李四</td> <td class="stuAcademy">会计学院</td> <td class="stuMajor">会计学</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">19</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">王五</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">18</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">赵六</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2000</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">张三</td> <td class="stuAcademy">计算机科学与工程学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">李四</td> <td class="stuAcademy">会计学院</td> <td class="stuMajor">会计学</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">19</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">王五</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">18</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">赵六</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2000</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">张三</td> <td class="stuAcademy">计算机科学与工程学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">李四</td> <td class="stuAcademy">会计学院</td> <td class="stuMajor">会计学</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">19</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">王五</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">18</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">赵六</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2000</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">张三</td> <td class="stuAcademy">计算机科学与工程学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">李四</td> <td class="stuAcademy">会计学院</td> <td class="stuMajor">会计学</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">19</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">王五</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2015</td> <td class="stuClass">2</td> <td class="stuAge">18</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> <tr class="trHover"> <td><input type="checkbox"></td> <td class="stuSequence">1</td> <td class="stuId">11503080210</td> <td class="stuName">赵六</td> <td class="stuAcademy">理学院</td> <td class="stuMajor">软件工程</td> <td class="stuYear">2000</td> <td class="stuClass">6</td> <td class="stuAge">21</td> <td> <a class="viewInf ">查看</a> <a class="updateInf ">修改</a> </td> </tr> </tbody> <tfoot> </tfoot> </tbody> </table> <!--增加的模态框--> <div class="modal addfade" id="addmodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i>X</i> <h4>新增学生信息</h4> </div> <div class="modal-body"> <p> 序号：<input type="text" /> </p> <p> 学号：<input type="text" /> </p> <p> 姓名：<input type="text" /> </p> <p> 学院：<input type="text" /> </p> <p> 专业：<input type="text" /> </p> <p> 年级：<input type="text" /> </p> <p> 班级：<input type="text" /> </p> <p> 年龄：<input type="text" /> </p> </div> <div class="modal-footer"> <div class="pageInfoBox"></div> <button class="addButton_ok">确定</button> <button class="addButton_no">取消</button> </div> </div> </div> </div> <!--修改的模态框--> <div class="modal movefade movemodal" id="movemodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i>X</i> <h4>修改学生信息</h4> </div> <div class="modal-body"> <p> 序号：<input type="text" /> </p> <p> 学号：<input type="text" /> </p> <p> 姓名：<input type="text" /> </p> <p> 学院：<input type="text" /> </p> <p> 专业：<input type="text" /> </p> <p> 年级：<input type="text" /> </p> <p> 班级：<input type="text" /> </p> <p> 年龄：<input type="text" /> </p> </div> <div class="modal-footer"> <button class="updatabtn_ok">保存</button> <button class="updatabtn_no">取消</button> </div> </div> </div> </div> <!--查看的模态框--> <div class="modal viewfade" id="viewmodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <i>X</i> <h4>查看学生信息</h4> </div> <div class="modal-body"> <p> 序号：<input type="text" class="viewStyle" disabled="disabled" /> </p> <p> 学号：<input type="text" /> </p> <p> 姓名：<input type="text" /> </p> <p> 学院：<input type="text" /> </p> <p> 专业：<input type="text" /> </p> <p> 年级：<input type="text" /> </p> <p> 班级：<input type="text" /> </p> <p> 年龄：<input type="text" /> </p> </div> <div class="modal-footer"> <button class="addButton_no">取消</button> </div> </div> </div> </div> </div> <div class="footer"> <div class="pageInformation"> 第<span id="curPage"></span>页， 共<span id="countPage"></span>条，(每页显示20条) <input id="page" type="text"style="display: none" > </div> <div class="pageButton"> <button id="prePageButton">上一页</button> <button id="nextPageButton">下一页</button> </div> </div> </div> <script src="js/"></script> <script src="js/"></script> </body> </html>

相关文章