無後端數據庫版本的----學生信息管理系統
文末下載地址
這學期的前端作業很奇怪，不用數據庫實現學生信息管理系統，隨便寫了下。
具體功能如下：
- 實現了查看信息（單擊查看按鈕，查看具體信息，且爲不可修改格式）
- 實現了修改信息功能（單擊修改按鈕，可以對學生的信息進行修改）
- 實現了新增功能（可以新增加一個學生的信息，添加到最後邊）
- 實現了刪除功能（在複選框中選擇幾個就刪除幾個）
- 實現了全選功能（單擊第一個複選框，就會選擇所有的學生列表）
- 實現了翻頁功能（統計共有多少條數據，當前頁，下一頁，上一頁功能）
- 具體還有一些鼠標觸碰了顯示效果
如圖所示：
具體代碼如下：
<!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>學生信息管理系統</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">學生信息管理系統</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">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">2</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">3</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">4</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">5</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">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">應用技術學院</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">外國語學院</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">8</td>
<td class="stuId">11503080210</td>
<td class="stuName">張三</td>
<td class="stuAcademy">計算機科學與工程學院</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">應用技術學院</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">計算機科學與工程學院</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">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">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>
<!-- <tr>-->
<!-- <td colspan="4">-->
<!-- <button class="delbtn ">刪除</button>-->
<!-- -->
<!-- </td>-->
<!-- </tr>-->
</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>條，(每頁顯示10條)
<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/jquery.min.js"></script>
<script src="js/studentInformationManage.js"></script>
</body>
</html>
*{
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;
}
/*全選功能*/
$('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(){
//Add
var 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)
})
//delete
var del=[]
$(document).on("click",".delbtn",function(){
del=[]
if(confirm("確定刪除嗎？")){
$(this).parents("tr").fadeOut(0)
}
})
//updateShow
var 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)
})
//view
var 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)
})
})
//單數行和多數行背景色設置
$(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() { // 遍歷選中的checkbox
n = $(this).parents("tr").index(); // 獲取checkbox所在行的順序
$("table#containerTable").find(".trHover:eq("+n+")").remove();
});
});
});
//end
//翻頁功能
//table分頁
var pageSize=10; //每頁顯示的記錄條數
var curPage=0; //顯示第curPage頁
var len; //總行數
var page; //總頁數
$(function(){
len =$("#containerTable tr").length-1; //去掉表頭
page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據記錄條數，計算頁數
console.log("len:"+len+"page:"+page);
document.getElementById("page").value=page;
curPage=1;
displayPage();//顯示第一頁
$("#nextPageButton").click(function(){//下一頁
if(curPage<page){
curPage+=1;
}
else{
alert("已經是最後一頁了")
}
displayPage();
});
$("#prePageButton").click(function(){//上一頁
if(curPage>1){
curPage-=1;
}
else{
alert("已經是第一頁了不能再翻了");
}
displayPage();
});
});
function displayPage(){
var begin=(curPage-1)*pageSize;//起始記錄號
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頁的記錄
{
$("#containerTable_one").show();
$(this).show();
document.getElementById("curPage").innerHTML=curPage;
document.getElementById("countPage").innerHTML = len;
}
});
}
function pageSize2(){
curPage=0; //顯示第curPage頁
pageSize=parseInt(document.getElementById("pageSize").value);
len =$("#containerTable tr").length-1; //去掉表頭
page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根據記錄條數，計算頁數
console.log("len:"+len+" page:"+page);
document.getElementById("page").value=page;
curPage=1;
displayPage();//顯示第一頁
}
//end