html+css+JavaScript例題
阿新 • • 發佈：2017-10-30
html javascript css
這個例題主要是做一個表格，一個存儲學生資料的表格，能夠完成以下功能：
添加學生
刪除學生
修改學生
分頁查詢學生
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 引入樣式文件 -->
<link rel="stylesheet" href="css/style_A.css" />
<!-- 引入腳本文件 -->
<script type="text/javascript" src="js/operation.js"></script>
<!-- 添加一個用於初始化的事件 -->
<body onload="init()">
<!-- 打開修改或添加的操作窗口時，用來覆蓋網頁的div -->
<div id="back_div">
<!-- 作為進行添加操作的窗口，不打開時是隱藏的 -->
<div id="addOperation">
<!-- 讓表單中的組件能夠向右對齊 -->
<div id="main_div">
<h2>添加學生...</h2>
<!-- 收集並驗證需要添加的數據 -->
<form id="add_from" onsubmit="return addStudent(this)"><!-- 任何情況下都return false表單不提交 -->
<ul>
<li>
<label>姓名：</label>
<input type="text" required="required" placeholder="姓名只能是中文" name="sname"
pattern="[\u4E00-\u9FA5]{2,5}$" /><label class="label">*</label>
</li>
<li>
<label>年齡：</label><input type="text" required="required" placeholder="周歲"
name="age" /><label class="label">*</label>
</li>
<li>
<label>性別：</label><label style="margin-left: 30px;">男</label><input type="radio"
checked name="sex" /><label style="margin-left: 70px;">女</label><input type="radio" name="sex" />
<label class="label">*</label>
</li>
<li>
<label>住址：</label><input type="text" required="required" placeholder="聯系地址"
name="address" /><label class="label">*</label>
</li>
<li>
<label>手機號碼：</label><input type="text" required="required" placeholder="手機號碼"
name="phoneNumber" pattern="^1[34578]\d{9}$"/><label class="label">*</label>
</li>
<button id="add_button" type="submit">添加</button>
<button type="button" id="close_button">退出</button>
</ul>
</form>
</div>
</div>
<!-- 作為進行修改操作的窗口，不打開時是隱藏的 -->
<div id="editOperation">
<!-- 讓表單中的組件能夠向右對齊 -->
<div id="editMain_div">
<h2>修改學生資料...</h2>
<!-- 收集並驗證需要修改的數據 -->
<form id="edit_from" onsubmit="return editStudent(this)">
<ul>
<li>
<label>姓名：</label>
<!-- 隱藏域是用來記錄需要修改的學生對象所在的數組下標的 -->
<input type="hidden" name="arrayIndex" />
<input type="text" required="required" placeholder="姓名只能是中文" name="sname"
pattern="[\u4E00-\u9FA5]{2,5}$" /><label class="label">*</label>
</li>
<li>
<label>年齡：</label><input type="text" required="required" placeholder="周歲"
name="age" /><label class="label">*</label>
</li>
<li>
<label>性別：</label><label style="margin-left: 30px;">男</label><input type="radio"
checked name="sex" /><label style="margin-left: 70px;">女</label><input type="radio" name="sex" />
<label class="label">*</label>
</li>
<li>
<label>住址：</label><input type="text" required="required" placeholder="聯系地址"
name="address" /><label class="label">*</label>
</li>
<li>
<label>手機號碼：</label><input type="text" required="required" placeholder="手機號碼"
name="phoneNumber" pattern="^1[34578]\d{9}$" /><label class="label">*</label>
</li>
<button id="edit_button" type="submit">修改</button>
<button type="button" id="editClose_button">退出</button>
</ul>
</form>
</div>
</div>
</div>
<!-- 讓表格居中 -->
<div align="center">
<!-- 以表格的方式顯示數據 -->
<table id="tableData" cellspacing="0" >
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>住址</th>
<th>手機號碼</th>
<th>操作</th>
</tr>
</thead>
<!-- 用於方便插入數據 -->
<tbody id="tableBody">
</tbody>
<tfoot>
<tr>
<td colspan="6" align="right">
<!-- 註冊相應的事件 -->
[
<a href="javascript://" id="addHref">添加學生</a>] 共計
<label id="rowCountLabel">0</label>行， 分
<label id="pageCountLabel">0</label>頁， 當前是第
<label id="thisPageLable">1</label>頁 [
<a href="javascript://" id="shouye">首頁</a>] [
<a href="javascript://" id="shangyiye">上一頁</a>] [
<a href="javascript://" id="xiayiye">下一頁</a>] [
<a href="javascript://" id="weiye">尾頁</a>]
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>CSS代碼：
body{
margin: 0px;
}
#back_div{
position: absolute;
z-index: 997;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
display: none;
}
#addOperation,#editOperation{
position: absolute;
z-index: 998;
width: 506px;
height: 333px;
top: 25%;
left: 35%;
background-color: cornflowerblue;
border-radius: 10px;
}
#tableData{
width: 100%;
text-align: center;
}
#tableData thead tr th{
margin: 0px;
font-size:20px ;
box-shadow: 0px 10px 10px darkgray;
background-color: rgba(230,230,230,0.5);
}
#tableBody td{
margin-top: 0px;
margin-bottom: 0px;
box-shadow: 0px 0px 3px darkgray;
background-color: rgba(255,255,255,0.0);
}
#tableBody tr:hover{
height: 65px;
background-color: rgba(230,230,230,0.3);
}
#tableData tr td,th{
padding: 20px;
}
a{
text-decoration: none;
color: #6495ED;
}
#delete{
color: red;
}
a:hover{
text-decoration: underline;
color: chocolate;
}
.label{
color: red;
margin-left:5px;
}
ul{
list-style: none;
}
#main_div button,#editMain_div button{
position: absolute;
text-align: left;
}
#main_div button:hover{
background-color: dimgray;
color: #D2691E;
border: 1px solid dimgray;
}
#editMain_div button:hover{
background-color: #6495ED;
color: white;
border: 1px solid dimgray;
}
ul li{
margin: 20px;
}
#main_div,#editMain_div{
width: 380px;
text-align: right;
}
#main_div h2,#editMain_div h2{
font-weight: 500;
text-align: left;
margin-left: 15px;
}
#add_button,#edit_button{
left: 175px;
}
#close_button,#editClose_button{
left: 305px;
}JavaScript代碼：
//用於存儲學生對象的數組
var students = new Array();
//總共能分多少頁數
var pageConut = 0;
//當前頁數
var thisPage = 0;
//通過元素ID查找到元素對象，然後返回出去
function $(element_ID) {
return window.document.getElementById(element_ID);
}
//關閉用於覆蓋網頁的div
function close_div() {
$("back_div").style.display = "none";
}
//打開添加學生資料的div
function open_add() {
$("back_div").style.display = "block";
$("addOperation").style.display = "block";
$("editOperation").style.display = "none";
}
//打開修改學生資料的div
function open_edit() {
$("addOperation").style.display = "none";
$("back_div").style.display = "block";
$("editOperation").style.display = "block";
}
//隨便註入一些數據來測試用的
function initData() {
for(var i = 0; i <= 10; i++) {
var stu = new Student("test" + i, 12, "男", "湖南" + i, "15820365112");
students.push(stu);
}
}
//初始化方法，主要用來給各個元素添加事件
function init() {
//初始化時註入一些數據來測試效果
initData();
//在初始化時顯示第一頁
showStudentAll(1);
//點擊這個超鏈接後就能打開添加學生資料的窗口
$("addHref").onclick = function() {
open_add();
}
//點擊這個按鈕後就能退出添加學生資料的窗口
$("close_button").onclick = function() {
close_div();
}
//點擊這個按鈕後就能退出修改學生資料的窗口
$("editClose_button").onclick = function() {
close_div();
}
//點擊這個超鏈接後就能跳轉到首頁
$("shouye").onclick = function() {
//如果只有一頁就不跳到首頁，並告訴用戶只有一頁數據
if(pageConut == 1) {
alert("當前只有一頁！");
return;
}
//如果不止一頁就可以跳到首頁
showStudentAll(1);
}
//點擊這個超鏈接後就能跳轉到上一頁
$("shangyiye").onclick = function() {
//如果當前是第一頁就停留，否則跳轉到到上一頁
showStudentAll(thisPage == 1 ? 1 : thisPage - 1);
}
//點擊這個超鏈接後就能跳轉到下一頁
$("xiayiye").onclick = function() {
//如果當前是最後一頁就停留，否則跳轉到到下一頁
showStudentAll(thisPage == pageConut ? pageConut : thisPage + 1);
}
//點擊這個超鏈接後就能跳轉到尾頁
$("weiye").onclick = function() {
//如果只有一頁或者當前就在尾頁的話就不跳到尾頁，並提示用戶
if(pageConut == 1) {
alert("當前只有一頁！");
return;
}else if(pageConut==thisPage){
alert("已經是尾頁了！");
return;
}
//如果不止一頁或不在尾頁就可以跳到尾頁
showStudentAll(pageConut);
}
}
//以數組下標來刪除學生數據
function delStudent(index) {
//詢問用戶是否確定刪除數據，確定才進行刪除
if(window.confirm("確定刪除此數據嗎？")) {
students.splice(index, 1);
}
//刪除後刷新當前頁面
showStudentAll(thisPage);
}
//通過數組下標來獲得需要修改的學生對象，並將此對象的數據顯示在div窗口的表單上
function showStudentEditDiv(index) {
open_edit();
//通過數組下標，拿出需要修改的學生數據對象
var stuObj = students[index];
//把從數組裏拿出來的對象數據，顯示在表單上
$("edit_from").arrayIndex.value = index;//隱藏域是用來記錄需要修改的學生對象所在的數組下標的
$("edit_from").sname.value = stuObj.name;
$("edit_from").age.value = stuObj.age;
$("edit_from").address.value = stuObj.address;
$("edit_from").phoneNumber.value = stuObj.phoneNumber;
//先刪除性別單選框裏的checked屬性，讓兩個單選框都不被選中
$("edit_from").sex[0].removeAttribute("checked");
$("edit_from").sex[1].removeAttribute("checked");
//如果性別為“男”，就給“男”單選框添加checked屬性，讓這個單選框被選中，否則反之
if(stuObj.sex == "男") {
$("edit_from").sex[0].setAttribute("checked", "true");
} else {
$("edit_from").sex[1].setAttribute("checked", "true");
}
}
//學生數據的封裝類
function Student(name, age, sex, address, phoneNumber) {
this.name = name;
this.age = age;
this.sex = sex;
this.address = address;
this.phoneNumber = phoneNumber;
}
//將當前頁碼的學生數據呈現出來
function showStudentAll(page) {
//存儲當前頁碼
thisPage = page;
//以10行為一頁，計算總共分幾頁 //因為以10行為一頁，所以數組長度除以10
pageConut = Math.floor((students.length / 10) + (students.length % 10 == 0 ? 0 : 1));
//這裏是要得出余數，因為如果尾頁的行數少於10行的話，就得分一頁出來，
//如果剛好是10行的話，就不需要分了已經能夠整除了
var htmlStr = ""; //用字符串存儲組合好的html標簽
var rowNum = 0; //此變量作為循環的跳出條件之一
//循環添加學生數據
/*使用當前頁數計算出前一頁數據所占的行數，
並以此作為變量的初始值，讓變量在這個節
點上進行增長，所以進入某頁或者在某頁添
加一行數據都是在這個節點上進行重新添加*/
for(var i = ((page - 1) * 10); i < students.length && rowNum++ != 10; i++) {
//添加到第十行就要跳出循環
var stuObj = students[i]; //拿取學生對象
//利用數組合成html標簽，並將學生對象裏的數據添加進去
var trStr = ["<tr>",
"<td>",
stuObj.name,
"</td>",
"<td>",
stuObj.age,
"</td>",
"<td>",
stuObj.sex,
"</td>",
"<td>",
stuObj.address,
"</td>",
"<td>",
stuObj.phoneNumber,
"</td>",
"<td>",
//添加事件，並把每行數據的數組下標記錄在參數裏
"【<a href=‘javascript://‘ id=‘delete‘ onclick=‘delStudent(", i, ")‘>刪除</a>】",
"【<a href=‘javascript://‘ onclick=‘showStudentEditDiv(", i, ")‘>修改</a>】",
"</td>",
"</tr>"
].join("");//將字符串數組合成一個字符串
//alert(htmlStr);
htmlStr += trStr; //將合成後的字符串存儲到該變量中
}
//把組合成的標簽插入到tableBody裏，也就是將數據顯示到表格上
$("tableBody").innerHTML = htmlStr;
//顯示總行數
$("rowCountLabel").innerText = students.length;
//顯示總共分了幾頁
$("pageCountLabel").innerText = pageConut;
//顯示當前在第幾頁
$("thisPageLable").innerText = thisPage;
}
//添加學生資料，參數為表單對象
function addStudent(fromObj) {
//收集表單數據
var name = fromObj.sname.value;
var age = fromObj.age.value;
var sex = fromObj.sex[0].checked ? "男" : "女";
var address = fromObj.address.value;
var phoneNumber = fromObj.phoneNumber.value;
//在控制臺打印日誌信息，看看收集表單數據的過程有沒有出問題
console.log(name);
console.log(age);
console.log(sex);
console.log(address);
console.log(phoneNumber);
//把收集到的學生數據封裝到對象裏
var stu = new Student(name, age, sex, address, phoneNumber);
students.push(stu); //然後把對象添加到數組裏
//重置表單數據
fromObj.reset();
//關閉添加窗口
close_div();
//顯示當前頁面的數據，也可以說是刷新
showStudentAll(thisPage);
//不提交表單
return false;
}
//修改學生資料，參數為表單對象
function editStudent(fromObj) {
//收集表單數據
var name = fromObj.sname.value;
var age = fromObj.age.value;
//有checked屬性的就會返回true
var sex = fromObj.sex[0].checked ? "男" : "女";
var address = fromObj.address.value;
var phoneNumber = fromObj.phoneNumber.value;
var arrayIndex = fromObj.arrayIndex.value;
//在控制臺打印日誌信息，看看收集表單數據的過程有沒有出問題
console.log(name);
console.log(age);
console.log(sex);
console.log(address);
console.log(phoneNumber);
console.log(arrayIndex);
//通過隱藏域記錄的數組下標拿出學生對象
var stuObj = students[arrayIndex];
//將這個對象的數據重新覆蓋一遍
stuObj.name = name;
stuObj.age = age;
stuObj.sex = sex;
stuObj.address = address;
stuObj.phoneNumber = phoneNumber;
//重置表單數據
fromObj.reset();
//關閉修改窗口
close_div();
//刷新當前頁面
showStudentAll(thisPage);
//不提交表單
return false;
}運行結果：
本文出自 “zero” 博客，請務必保留此出處http://zero01.blog.51cto.com/12831981/1977526
html+css+JavaScript例題