标签：function 改查 JS var 添加 按钮 增删 td document
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;
}
//每一次单击时都会判断
}
效果图
代码云文件 提取码：1012
标签：function,改查,JS,var,添加,按钮,增删,td,document 来源： https://blog.csdn.net/qq_45809464/article/details/120729952
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。