js做动态增删改查
在学习js以后我们可以模拟后端，实现动态的页面增删改查
- 设计前端页面
- 完善基础样式
- 写增删改查的方法
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table id="tab">
<tr id="top">
<th style="width: 70px;">编号</th>
<th class="cl_info">姓名</th>
<th class="cl_info">性别</th>
<th class="cl_info">年龄</th>
<th class="cl_but">删除</th>
<th class="cl_but">修改</th>
<th class="cl_but"><button class="bt" onclick="addpeo()">增加</button></th>
<th class="cl_but">全选 <input type="checkbox" onclick="Allclose()" id="selectall" > </th>
<th class="cl_but"><button class="bt" onclick= "query()" >查询</button></th>
</tr>
</table>
</body>
</html>
<script>
index.css
#tab{
width: 960px;
border: 2px gray solid;
margin: 0 auto;
color: white;
font-size: 14px;
}
#top{
height: 36px;
background-color: #40a29c;
}
.cl_info{
width: 140px;
}
.cl_but{
width: 100px;
}
.bt{
list-style: none;
border: none;
background: none;
font-weight: bolder;
font-size: 14px;
color: #ffc800;
}
js代码
var tab = document.getElementById("tab");
//获取表格
var marker = 1;
//设置我们的计数器
var lab = 0;
//为我们每一个元素添加一个定位器
var database = new Array();
var arrseep = 0 ; //给数组添加一个计数器
//定义一个数组方便我们储存存入的数据
定义增加的tr的方法
//写方法
function Attribute(user,sex,age){
this.user = user;
this.sex = sex;
this.age = age;
//定义传输的值
//添加tr表格行
this.addTr = function(){
//添加一个tr
this.newtr = document.createElement("tr");
//设置文字属性`
this.newtr.style.height = 30 + "px";
this.newtr.style.backgroundColor = "#1bbbb3";
this.newtr.style.textAlign = "center";
this.newtr.style.fontSize = 14 + "px";
this.newtr.className = "dataTr";
//将tr添加到表格
tab.appendChild(this.newtr);
}
//计数器的方法
this.Marker = function(){
//添加td标签
var mak = document.createElement("td");
//设置mak中的文字
mak.innerText = marker;
//将计数器添加到行中
this.newtr.appendChild(mak);
marker++;//计数器自增
}
//添加人物姓名
this.addUser = function(){
//添加td标签
var userTd = document.createElement("td");
//对姓名赋值
userTd.innerText = this.user;
userTd.className = "diyUser";
//将td标签添加到tr中
this.newtr.appendChild(userTd);
}
//添加性别
this.addSex = function(){
//添加td标签
var sexTd = document.createElement("td");
//对性别赋值
sexTd.innerText = this.sex;
sexTd.className = "diySex";
//将td标签添加到tr中
this.newtr.appendChild(sexTd);
}
//添加年龄
this.addAge = function(){
//添加td标签
var ageTd = document.createElement("td");
//对年龄赋值
ageTd.innerText = this.age;
ageTd.className = "diyAge";
//将td标签添加到tr中
this.newtr.appendChild(ageTd);
}
//删除方法
this.del = function(){
//添加一个td
var deleteTd = document.createElement("td");
//添加一个按钮
var delButton = document.createElement("button");
// 将按钮设置属性
delButton.style.background = "none";
delButton.style.border = "none";
delButton.className = "delBut";
delButton.innerText = "删除";
delButton.style.color = "#d20d20";
//单击时删除元素
delButton.onclick = function(){
//得到此元素的定位，第几个按钮
var allDel = document.getElementsByClassName("delBut");
//给所以的删除按钮index赋值
for(var i = 0 ; i < allDel.length ; i ++){
allDel[i].index = i + 1;
}
//接收这个函数按钮的位置并赋值给我们的标记器
lab = this.index;
//找到对应行数的tr
var delTr = document.getElementsByClassName("dataTr");
//删除此行
delTr[lab-1].remove();
}
//将按钮显示在表格中
this.newtr.appendChild(deleteTd);
deleteTd.appendChild(delButton);
}
//修改按钮
this.revise = function(){
//添加一个td
var reviseTd = document.createElement("td");
//添加一个按钮
var revButton = document.createElement("button");
// 将按钮设置属性
revButton.style.background = "none";
revButton.style.border = "none";
revButton.className = "revBut";
revButton.innerText = "修改";
revButton.style.color = "#00ff88";
//设置修改功能
revButton.onclick = function(){
//得到此元素的定位，第几个按钮
var allRev = document.getElementsByClassName("revBut");
//给所以的删除按钮index赋值
for(var i = 0 ; i < allRev.length ; i ++){
allRev[i].index = i + 1;
}
//接收这个函数按钮的位置并赋值给我们的标记器
lab = this.index;
//用算法在数组中找到对应的年龄的位置
var labage = lab*3 - 1;
//在数组中修改
database[labage] = prompt("请输入新的年龄");
//在修改对应的页面值
document.getElementsByClassName("diyAge")[lab-1].innerText = database[labage];
}
//将按钮显示在表格中
this.newtr.appendChild(reviseTd);
reviseTd.appendChild(revButton);
}
//查看按钮
this.check = function(){
var checkTd = document.createElement("td");
//添加一个td标签
var checkButton = document.createElement("button");
//创建一个button标签
checkButton.className = "checkButton";
checkButton.innerText = "查看";
checkButton.style.background = "none";
checkButton.style.border = "none";
checkButton.style.color = "#146870";
checkButton.onclick = function(){
var getCheckAll = document.getElementsByClassName("checkButton");
//得到全部查看标签
for(var i = 0 ; i < getCheckAll.length ; i++){
getCheckAll[i].index = i + 1;
}
var thisCheck = this.index;
thisCheck = thisCheck*4;
var marker = database[thisCheck-4];
var findname = database[thisCheck-3];
var findsex = database[thisCheck-2];
var findage = database[thisCheck-1];
alert( "编号：" + marker + "\n" + "姓名：" + findname + "\n" + "性别：" + findsex + "\n" + "年龄：" + findage);
}
this.newtr.appendChild(checkTd);
checkTd.appendChild(checkButton);
}
//选择按钮
this.closeipt = function(){
var closeTd = document.createElement("td");
var close = document.createElement("input");
//定义单选按钮的属性
close.type = "checkbox";
close.className = "closeIpt";
close.onclick = function(){
Judge();
}
// 将按钮添加到表格中
this.newtr.appendChild(closeTd);
closeTd.appendChild(close);
}
//备注
this.remarks = function(){
var remarks = document.createElement("td");
//定义单选按钮的属性
remarks.className = "remarks";
remarks.innerText = "已备注";
// 将按钮添加到表格中
this.newtr.appendChild(remarks);
}
//依此调用所以属性
this.addTr();
this.Marker();
this.addUser();
this.addSex();
this.addAge();
this.del();
this.revise();
this.check();
this.closeipt();
this.remarks();
}
添加元素的方法`
//添加元素
function addpeo(){
var userName = prompt("请输入姓名");
var userSex = prompt("请输入性别");
var userAge = prompt("请输入年龄");
//将数据存入数组
database[arrseep] = marker;
arrseep++;
database[arrseep] = userName;
arrseep++;
database[arrseep] = userSex;
arrseep++;
database[arrseep] = userAge;
arrseep++;
//调用函数,传入输入的值
Attribute(userName,userSex,userAge);
}
查询的方法
//查询元素
function query(){
var content = prompt("请输入你要查找的人名");
var nameIndex = database.indexOf(content);
if(nameIndex == -1){
alert("对不起，查无此人")
}else{
var marker = database[nameIndex-1];
var findname = database[nameIndex];
var findsex = database[nameIndex+1];
var findage = database[nameIndex+2];
alert( "编号：" + marker + "\n" + "姓名：" + findname + "\n" + "性别：" + findsex + "\n" + "年龄：" + findage);
}
}
全选方法
// 全选按钮
function Allclose(){
var allclose = document.getElementsByClassName("closeIpt");
var thisclose = document.getElementById("selectall");
if(allclose[0] == null){
alert("没有数据无法全选");
thisclose.checked = false;
return;
}
else{
}
if(thisclose.checked == true ){
for(var i = 0 ; i < allclose.length; i ++){
allclose[i].checked = true;
}
}
else if(thisclose.checked == false ){
for(var i = 0 ; i < allclose.length; i ++){
allclose[i].checked = false;
}
}
}
取消全选
function Judge(){
var allclose = document.getElementsByClassName("closeIpt");
var selecclose = document.getElementById("selectall");
var arr = [];
// 把所以选择框都放在数组中
for(var i = 0 ; i < allclose.length ; i++){
arr[i] = allclose[i].checked;
}
// 获取他们的checked的值
var get = arr.indexOf(false);
// 查找是否有false如果有则是不全选，没有的话则是全选
if(get == -1 ){
selecclose.checked = true;
}else{
selecclose.checked = false;
}
//每一次单击时都会判断
}