学生信息管理系统（纯前端页面）———无后端数据库
生活随笔
收集整理的這篇文章主要介紹了
学生信息管理系统（纯前端页面）———无后端数据库
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
無(wú)后端數(shù)據(jù)庫(kù)版本的----學(xué)生信息管理系統(tǒng)
文末下載地址
因?yàn)椴簧偃苏f(shuō)GitHub的鏈接資源下載緩慢或者下不了，所以我放了CSDN的下載鏈接。
應(yīng)該是不要積分的，我設(shè)置的0積分下載。
學(xué)生信息管理系統(tǒng)下載鏈接（CSDN）
這學(xué)期的前端作業(yè)很奇怪，不用數(shù)據(jù)庫(kù)實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)，隨便寫(xiě)了下。
具體功能如下：
如圖所示：
具體代碼如下：
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html lang="en"> <head><meta charset="UTF-8"><title>學(xué)生信息管理系統(tǒng)</title><link rel="stylesheet" type="text/css" href="css/studentInformationManage.css"> </head> <body><div class="wrapperBox"><div class="header"><div class="headerTitle"><div class="headerLine">學(xué)生信息管理系統(tǒng)</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>序號(hào)</th><th>學(xué)號(hào)</th><th>姓名</th><th>學(xué)院</th><th>專業(yè)</th><th>年級(jí)</th><th>班級(jí)</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">11503080210</td><td class="stuName">張三</td><td class="stuAcademy">計(jì)算機(jī)科學(xué)與工程學(xué)院</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">2</td><td class="stuId">11503080210</td><td class="stuName">李四</td><td class="stuAcademy">會(huì)計(jì)學(xué)院</td><td class="stuMajor">會(huì)計(jì)學(xué)</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">3</td><td class="stuId">11503080210</td><td class="stuName">王五</td><td class="stuAcademy">理學(xué)院</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">4</td><td class="stuId">11503080210</td><td class="stuName">趙六</td><td class="stuAcademy">理學(xué)院</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">5</td><td class="stuId">11503080210</td><td class="stuName">張三</td><td class="stuAcademy">機(jī)械學(xué)院</td><td class="stuMajor">修車</td><td class="stuYear">2015</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">6</td><td class="stuId">11503080210</td><td class="stuName">張三</td><td class="stuAcademy">應(yīng)用技術(shù)學(xué)院</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">7</td><td class="stuId">11503080210</td><td class="stuName">王五</td><td class="stuAcademy">外國(guó)語(yǔ)學(xué)院</td><td class="stuMajor">英語(yǔ)</td><td class="stuYear">2017</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">8</td><td class="stuId">11503080210</td><td class="stuName">張三</td><td class="stuAcademy">計(jì)算機(jī)科學(xué)與工程學(xué)院</td><td class="stuMajor">軟件工程</td><td class="stuYear">2017</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">9</td><td class="stuId">11503080210</td><td class="stuName">張三</td><td class="stuAcademy">應(yīng)用技術(shù)學(xué)院</td><td class="stuMajor">軟件工程</td><td class="stuYear">2018</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">10</td><td class="stuId">11503080210</td><td class="stuName">張三</td><td class="stuAcademy">計(jì)算機(jī)科學(xué)與工程學(xué)院</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">應(yīng)用技術(shù)學(xué)院</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">應(yīng)用技術(shù)學(xué)院</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">計(jì)算機(jī)科學(xué)與工程學(xué)院</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">會(huì)計(jì)學(xué)院</td><td class="stuMajor">會(huì)計(jì)學(xué)</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">理學(xué)院</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">理學(xué)院</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">計(jì)算機(jī)科學(xué)與工程學(xué)院</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">會(huì)計(jì)學(xué)院</td><td class="stuMajor">會(huì)計(jì)學(xué)</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">理學(xué)院</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">理學(xué)院</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">計(jì)算機(jī)科學(xué)與工程學(xué)院</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">會(huì)計(jì)學(xué)院</td><td class="stuMajor">會(huì)計(jì)學(xué)</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">理學(xué)院</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">理學(xué)院</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">計(jì)算機(jī)科學(xué)與工程學(xué)院</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">會(huì)計(jì)學(xué)院</td><td class="stuMajor">會(huì)計(jì)學(xué)</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">理學(xué)院</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">理學(xué)院</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> <!-- <tr>--> <!-- <td colspan="4">--> <!-- <button class="delbtn ">刪除</button>--> <!-- --> <!-- </td>--> <!-- </tr>--></tfoot></tbody></table><!--增加的模態(tài)框--><div class="modal addfade" id="addmodal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><i>X</i><h4>新增學(xué)生信息</h4></div><div class="modal-body"><p>序號(hào)：<input type="text" /></p><p>學(xué)號(hào)：<input type="text" /></p><p>姓名：<input type="text" /></p><p>學(xué)院：<input type="text" /></p><p>專業(yè)：<input type="text" /></p><p>年級(jí)：<input type="text" /></p><p>班級(jí)：<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><!--修改的模態(tài)框--><div class="modal movefade movemodal" id="movemodal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><i>X</i><h4>修改學(xué)生信息</h4></div><div class="modal-body"><p>序號(hào)：<input type="text" /></p><p>學(xué)號(hào)：<input type="text" /></p><p>姓名：<input type="text" /></p><p>學(xué)院：<input type="text" /></p><p>專業(yè)：<input type="text" /></p><p>年級(jí)：<input type="text" /></p><p>班級(jí)：<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><!--查看的模態(tài)框--><div class="modal viewfade" id="viewmodal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><i>X</i><h4>查看學(xué)生信息</h4></div><div class="modal-body"><p>序號(hào)：<input type="text" class="viewStyle" disabled="disabled" /></p><p>學(xué)號(hào)：<input type="text" /></p><p>姓名：<input type="text" /></p><p>學(xué)院：<input type="text" /></p><p>專業(yè)：<input type="text" /></p><p>年級(jí)：<input type="text" /></p><p>班級(jí)：<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>頁(yè)，共<span id="countPage"></span>條，(每頁(yè)顯示10條)<input id="page" type="text"style="display: none" ></div><div class="pageButton"><button id="prePageButton">上一頁(yè)</button><button id="nextPageButton">下一頁(yè)</button></div></div></div><script src="js/jquery.min.js"></script><script src="js/studentInformationManage.js"></script> </body> </html>?css
*{margin: 0;padding: 0; } .wrapperBox{width: 1229px;height: 645px;background-color:#f0ece9 ;margin: 0 auto; } .header{width: 1200px;height: 111px;margin: 0 auto; }.headerTitle{width: 1200px;height: 56px; } .headerButton{width: 205px;height: 40px;line-height: 40px; } .container{width: 1200px;height: 455px;margin: 0 auto;font-size: 12px;text-align: center; } .footer{width: 1200px;height: 79px;margin: 0 auto; } /*.pageInformation{*/ /* width: 226px;*/ /* height: 79px;*/ /* background-color: blue;*/ /* float: left;*/ /*}*/ /**/ .pageButton{width: 190px;height: 79px;line-height: 79px;float: right;} .addButton{width: 93px;height: 38px;background-color: #5cb85c;border: 1px solid #000000;color: #fff;cursor: pointer; } #deleteButton{width: 93px;height: 38px;background-color: #d9534f;border: 1px solid #000000;color: #fff;margin-left: 14px;cursor: pointer; } #prePageButton{width: 88px;height: 38px;background-color: #5cb85c;border: 1px solid #000000;color: #fff;cursor: pointer; } #nextPageButton{width: 88px;height: 38px;background-color: #d9534f;border: 1px solid #000000;margin-left: 9px;color: #fff;cursor: pointer; } .viewInf ,.updateInf{color: #ff0000;cursor: pointer; } .updateInf{margin-left: 9px; } .container table{border-collapse: collapse;width: 100%; } .container td{height: 40px; } .tableHeaher{height: 55px;background-color: #dadee1; } tr.trHover:hover{background-color: red; }/*headerStyle */ .headerLine{width: 1200px;color: #999999;text-align: center;font-size: 24px;} .headerLine:before,.headerLine:after{content: "";width: 406px;border-top: 4px #c3a080 solid; display: inline-block;vertical-align: middle;} .headerLine:before{margin-right: 98px;} .headerLine:after{margin-left: 98px;} /*end *//*cintainerStyle */ i{font-style: normal;} td{height: 40px; }#addmodal{position: fixed;left: 0px;top: 0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);display: none; } #viewmodal{position: fixed;left: 0px;top: 0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);display: none; } #movemodal{position: fixed;left: 0px;top: 0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);display: none; } .modal-dialog{position: relative;width: 500px;margin: 0px auto;background: white;border-radius: 5px; } .modal-header {border-bottom: 1px solid #e5e5e5;color: #fff;background-color: #555;height: 40px;line-height: 40px;padding-left: 20px; } .modal-header>i{font-weight: bold;color: #ADADAD;float: right;cursor: pointer; } .modal-body {position: relative;text-align: center; } .modal-body input{width: 202px;border: 1px solid #a9a9a9;outline: none;margin: 10px; } .modal-footer {padding: 15px;text-align: right;border-top: 1px solid #e5e5e5; } .addButton_ok{width: 93px;height: 38px;border-radius: 4px;background: #5cb85c;color: #808080;outline: none;cursor: pointer;border: 1px solid #aeaeae; } .addButton_no{width: 93px;height: 38px;border-radius: 4px;background: #fff;color: #808080;outline: none;cursor: pointer;border: 1px solid #aeaeae; } .pageInformation{width: 226px;height: 16px;padding-top: 29px;font-size: 15px;line-height: 16px;float: left; }.updatabtn_ok{width: 93px;height: 38px;border-radius: 4px;background: #fff;color: #808080;outline: none;cursor: pointer;border: 1px solid #aeaeae; } .updatabtn_no{width: 93px;height: 38px;border-radius: 4px;background: #fff;color: #808080;outline: none;cursor: pointer;border: 1px solid #aeaeae; }?js
/*全選功能*/ $('table th input:checkbox').on('click', function(){var that = this;$(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){this.checked = that.checked;$(this).closest('tr').toggleClass('selected');}); }); /*end*/ //表格操作 $(function(){//Addvar arrAdd=[]$(document).on("click",".addButton",function(){$(".addfade").fadeIn(0)})//addArray$(document).on("click",".addButton_ok",function(){$(".addfade").fadeOut(0)arrAdd=[]$('#addmodal').find("input").each(function(){arrAdd.push($(this).val())});var str='<tr>' +'<td><input type="checkbox"></td>' +'<td class="stuSequence">'+arrAdd[0]+'</td>' +'<td class="stuId">'+arrAdd[1]+'</td>' +'<td class="stuName">'+arrAdd[2]+'</td>' +'<td class="stuAcademy">'+arrAdd[3]+'</td>' +'<td class="stuMajor">'+arrAdd[4]+'</td>' +'<td class="stuYear">'+arrAdd[5]+'</td>' +'<td class="stuClass">'+arrAdd[6]+'</td>' +'<td class="stuAge">'+arrAdd[7]+'</td>' +'<td>' + '<a class="viewInf ">查看</a> <a class="updateInf ">修改</a></td>' +'</tr>'$("tbody").append(str)//奇偶行的顏色不同$("tr:odd").css("background-color","#fff");$("tr:even").css("background-color","#eef1f8");//end//顏色選擇變化var trEven = $("#tdata tr:even");trEven.mouseover(function () {$(this).css("background-color", "#AEF2E5");$(this).children("td").css("background-color", "#AEF2E5");}).mouseout(function () {$(this).css("background-color", "#FFFFFF");$(this).children("td").css("background-color", "#FFFFFF");});var trOdd = $("#tdata tr:odd");trOdd.mouseover(function () {$(this).css("background-color", "#AEF2E5");$(this).children("td").css("background-color", "#AEF2E5");}).mouseout(function () {$(this).css("background-color", "#eef1f8");$(this).children("td").css("background-color", "#eef1f8");});//end$('#addmodal').find("input").val('')})$(document).on("click",".addButton_no",function(){$(".addfade").fadeOut(0)})$(document).on("click",".modal-header i",function(){$(".addfade").fadeOut(0)})//deletevar del=[]$(document).on("click",".delbtn",function(){del=[]if(confirm("確定刪除嗎？")){$(this).parents("tr").fadeOut(0)}})//updateShowvar arrMove=[];var _this = null ;$(document).on("click",".updateInf",function(){arrMove=[]_this=$(this).parents("tr")$(".movefade").fadeIn(0)$(this).parent().siblings().each(function(){arrMove.push($(this).next().text())})$(this).parents().find('.movemodal input').each(function(i){$(this).val(arrMove[i])})})//updateBtn$(document).on("click",".updatabtn_ok",function(){arrMove=[]$(this).parent().siblings().find('input').each(function(){arrMove.push($(this).val())console.log($(this))})console.log(arrMove)$(this).parents().find('.movemodal input').each(function(i){$(this).val(arrMove[i+1])})_this.find("td").next().each(function(i){$(this).text(arrMove[i])})$(".movefade").fadeOut(0)})//updateCancel$(document).on("click",".updatabtn_no",function(){$(".movefade").fadeOut(0)})$(document).on("click",".modal-header i",function(){$(".movefade").fadeOut(0)})//viewvar arrView=[];var _thisView = null ;$(document).on("click",".viewInf",function(){arrMove=[]_thisView=$(this).parents("tr")$(".viewfade").fadeIn(0)$(this).parent().siblings().each(function(){arrView.push($(this).next().text())})$(this).parents().find('#viewmodal input').each(function(i){$(this).val(arrView[i]).attr("disabled", "disabled");})})//viewCancel$(document).on("click",".addButton_no",function(){$(".viewfade").fadeOut(0)})$(document).on("click",".modal-header i",function(){$(".viewfade").fadeOut(0)}) })//單數(shù)行和多數(shù)行背景色設(shè)置 $(document).ready(function(){$("tr:odd").css("background-color","#fff");$("tr:even").css("background-color","#eef1f8"); });//改變tr的背景顏色 $(function () {var trEven = $("#tdata tr:even");trEven.mouseover(function () {$(this).css("background-color", "#AEF2E5");$(this).children("td").css("background-color", "#AEF2E5");}).mouseout(function () {$(this).css("background-color", "#FFFFFF");$(this).children("td").css("background-color", "#FFFFFF");});var trOdd = $("#tdata tr:odd");trOdd.mouseover(function () {$(this).css("background-color", "#AEF2E5");$(this).children("td").css("background-color", "#AEF2E5");}).mouseout(function () {$(this).css("background-color", "#eef1f8");$(this).children("td").css("background-color", "#eef1f8");}); });//end//多選框刪除$(function(){// var cit= $("#containerTable");// if(cit.size()>0) {// cit.find("tr:not(:first)").remove();//// }$("#deleteButton").click(function() {$("input:checked").each(function() { // 遍歷選中的checkboxn = $(this).parents("tr").index(); // 獲取checkbox所在行的順序$("table#containerTable").find(".trHover:eq("+n+")").remove();});});});//end//翻頁(yè)功能//table分頁(yè) var pageSize=10; //每頁(yè)顯示的記錄條數(shù) var curPage=0; //顯示第curPage頁(yè) var len; //總行數(shù) var page; //總頁(yè)數(shù) $(function(){len =$("#containerTable tr").length-1; //去掉表頭page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據(jù)記錄條數(shù)，計(jì)算頁(yè)數(shù)console.log("len:"+len+"page:"+page);document.getElementById("page").value=page;curPage=1;displayPage();//顯示第一頁(yè)$("#nextPageButton").click(function(){//下一頁(yè)if(curPage<page){curPage+=1;}else{alert("已經(jīng)是最后一頁(yè)了")}displayPage();});$("#prePageButton").click(function(){//上一頁(yè)if(curPage>1){curPage-=1;}else{alert("已經(jīng)是第一頁(yè)了不能再翻了");}displayPage();});});function displayPage(){var begin=(curPage-1)*pageSize;//起始記錄號(hào)var end = begin + pageSize;console.log(" begin:"+len+" end:"+end);if(end > len ) end=len;$("#tdata tr").hide();$("#containerTable tr").each(function(i){if(i-1>=begin && i-1<end)//顯示第page頁(yè)的記錄{$("#containerTable_one").show();$(this).show();document.getElementById("curPage").innerHTML=curPage;document.getElementById("countPage").innerHTML = len;}});} function pageSize2(){curPage=0; //顯示第curPage頁(yè)pageSize=parseInt(document.getElementById("pageSize").value);len =$("#containerTable tr").length-1; //去掉表頭page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據(jù)記錄條數(shù)，計(jì)算頁(yè)數(shù)console.log("len:"+len+" page:"+page);document.getElementById("page").value=page;curPage=1;displayPage();//顯示第一頁(yè) } //end最后github上的源碼
2022.4.18更新
由于要的人比較多，如果csdn和git上還是不能下載。可以參考如下目錄復(fù)制代碼。
第一部分為html內(nèi)容，第二部分為css內(nèi)容，第三部分為js內(nèi)容。
?
js?
css?
或者直接通過(guò)百度網(wǎng)盤(pán)下載
鏈接：https://pan.baidu.com/s/1GYSLJ57ruA2xe-TmXsVj-w?
提取碼：vro3
總結(jié)
以上是生活随笔為你收集整理的学生信息管理系统（纯前端页面）———无后端数据库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 前端学习（2021）vue之电商管理系统
- 下一篇： 计算机三级数据库要安装什么软件,计算机三