前言
百度网盘:链接:https://pan.baidu.com/s/101MouWbUaig9XIAJrlZJUw
提取码:p41e
javascript+css+html实现表格的增删查搜索改功能
一、实现背景
制作简单的表单增删查改模板,以后每次项目中需要使用到时,直接复制粘贴使用即可
二、实现情况
(1)搜索
1.搜索功能:可以进行模糊查询,与输入的内容存在相同部分的表格背景颜色会变成红色
2.代码`
//搜索功能,模糊查询
var search_btn=document.getElementById("search_btn");
search_btn.οnclick=function(){
var search = document.getElementById("search");
filter = search.value;
td = document.getElementsByTagName("td");
for (i = 0; i < td.length; i++) {
if(td[i].innerText.indexOf(filter)>=0){
td[i].style.background="red";
}
}
}
(2)全选,反选
1.实现
2.代码
var check=document.getElementsByName("checkbox");
var btn=document.getElementById("btn");
var all=document.getElementById("all");
// 全选
all.onclick=function(){
for(var i=0;i<check.length;i++){
check[i].checked=true;
}
}
// 反选
reverse.onclick=function(){
for(var i=0;i<check.length;i++){
check[i].checked=!check[i].checked;
}
}
(3)删除功能:
1.对选中的行进行删除,并且删除前弹出提示框避免误删
删除后
2.代码
//对选择的进行删除
var Select=document.getElementById("select");
Select.onclick=function(){
// var k=0;
var check=document.getElementsByName("checkbox");
for(var f=0;f<check.length;f++){
if(check[f].checked==true){
check[f].parentNode.parentNode.parentNode.removeChild(check[f].parentNode.parentNode);
f--;
}
// f--;
}
// console.log(k);
}
2.按行进行删除:点击操作中的删除按钮,对一行信息进行删除,删除前弹出框提示
删除后
3.代码
```c
//按行删除
function Del(t){
if(confirm("是否删除这一行信息")){
t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode);
}
}
(4)新增
点击新增按钮,弹出表单,输入要新增的信息,点击增加按钮,表单信息增添到表格中(对tbody添加tr),采用从后面增加方式,同时表单display:none;表单右上角的叉可以将表单关闭
代码
// //点击新增按钮增加,出现信息表,添加tr
var add=document.getElementById("add");
var create_table=document.getElementById("create");
var cha=document.getElementById("cha");
var _name=document.getElementById("_name");
var room=document.getElementById("room")
var tel=document.getElementById("tel")
var sex=document.getElementById("sex")
var sure=document.getElementById("sure");
add.onclick=function(){
//出现
create_table.style.display="block";
editbtn.style.display="none";
sure.style.display="block";
}
sure.onclick=function(){
var tbody=document.getElementById("tbody");
var new_tr=document.createElement("tr");
new_tr.innerHTML='<td><input type="checkbox" name="checkbox"></td><td>'+_name.value+'</td><td>'+room.value+'</td><td>'+tel.value+'</td><td>'+sex.value+'</td><td><button οnclick="Del(this)">删除</button> </td><td><button οnclick="Edit(this)">修改</button></td>';
tbody.appendChild(new_tr);
create_table.style.display="none";
}
cha.onclick=function(){
create_table.style.display="none";
}
(4)修改功能
点击每行的修改按钮,可以对每行的信息进行修改
原来
修改后
代码
//编辑功能
function Edit(t){
editbtn.style.display="block";
create_table.style.display="block";
sure.style.display="none";
editbtn.onclick=function(){
t.parentNode.parentNode.innerHTML='<td><input type="checkbox" name="checkbox"></td><td>'+_name.value+'</td><td>'+room.value+'</td><td>'+tel.value+'</td><td>'+sex.value+'</td> <td><button οnclick="Del(this)">删除</button> </td><td><button οnclick="Edit(this)">修改</button></td>';
create_table.style.display="none";
}
}
三、代码
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<link rel="stylesheet" href="./biaoge.css">
</head>
<body>
<div style="overflow: hidden;">
<div class="search_box">
<input type="text" id="search" autofocus><button id="search_btn">搜索</button>
</div>
<table >
<caption>数据统计表<button id="add">新增</button></caption>
<tbody id="tbody">
<tr>
<td><button id="all">全选</button>
<button id="reverse">反选</button></td>
<td>姓名</td>
<td>宿舍</td>
<td>手机号</td>
<td>性别</td>
<td>操作</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"></td>
<td onclick="Edit(this)">小红</td>
<td>202</td>
<td>888</td>
<td>女</td>
<td><button onclick="Del(this)">删除</button></td>
<td><button onclick="Edit(this)">修改</button></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"></td>
<td>小明</td>
<td>33</td>
<td>44</td>
<td>男</td>
<td><button onclick="Del(this)">删除</button></td>
<td><button onclick="Edit(this)">修改</button></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"></td>
<td>xiaosan</td>
<td>444</td>
<td>666</td>
<td>男</td>
<td><button onclick="Del(this)">删除</button> </td>
<td><button onclick="Edit(this)">修改</button></td>
</tr>
</tbody>
</table>
<button id="select">对选择的进行删除</button>
<div class="create" id="create">
<div class="create_center">
<h2>请输入信息</h2><span id="cha">X</span>
<label for="">姓 名:</label> <input type="text" id="_name" value=""><br>
<label for="">房 间:</label> <input type="text" id="room" value=""><br>
<label for="">手机号:</label> <input type="text" id="tel" value=""><br>
<label for="">性 别:</label> <input type="text" id="sex" value=""><br>
<button id="sure">增加</button>
<button id="editbtn">修改</button>
</div>
</div>
</div>
</body>
<script>
// //点击新增按钮增加,出现信息表,添加tr
var add=document.getElementById("add");
var create_table=document.getElementById("create");
var cha=document.getElementById("cha");
var _name=document.getElementById("_name");
var room=document.getElementById("room")
var tel=document.getElementById("tel")
var sex=document.getElementById("sex")
var sure=document.getElementById("sure");
add.onclick=function(){
//出现
create_table.style.display="block";
editbtn.style.display="none";
sure.style.display="block";
}
sure.onclick=function(){
var tbody=document.getElementById("tbody");
var new_tr=document.createElement("tr");
new_tr.innerHTML='<td><input type="checkbox" name="checkbox"></td><td>'+_name.value+'</td><td>'+room.value+'</td><td>'+tel.value+'</td><td>'+sex.value+'</td><td><button οnclick="Del(this)">删除</button> </td><td><button οnclick="Edit(this)">修改</button></td>';
tbody.appendChild(new_tr);
create_table.style.display="none";
}
cha.onclick=function(){
create_table.style.display="none";
}
//
var check=document.getElementsByName("checkbox");
var btn=document.getElementById("btn");
var all=document.getElementById("all");
// 全选
all.onclick=function(){
for(var i=0;i<check.length;i++){
check[i].checked=true;
}
}
// 反选
reverse.onclick=function(){
for(var i=0;i<check.length;i++){
check[i].checked=!check[i].checked;
}
}
//按行删除
function Del(t){
if(confirm("是否删除这一行信息")){
t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode);
}
}
//对选择的进行删除
var Select=document.getElementById("select");
Select.onclick=function(){
// var k=0;
if(confirm("是否删除这些信息")){
var check=document.getElementsByName("checkbox");
for(var f=0;f<check.length;f++){
if(check[f].checked==true){
check[f].parentNode.parentNode.parentNode.removeChild(check[f].parentNode.parentNode);
f--;
}
// f--;
}
}
// console.log(k);
}
//搜索功能,模糊查询
var search_btn=document.getElementById("search_btn");
search_btn.onclick=function(){
var search = document.getElementById("search");
filter = search.value;
td = document.getElementsByTagName("td");
for (i = 0; i < td.length; i++) {
if(td[i].innerText.indexOf(filter)>=0){
td[i].style.background="red";
}
}
}
//编辑功能
function Edit(t){
editbtn.style.display="block";
create_table.style.display="block";
sure.style.display="none";
editbtn.onclick=function(){
t.parentNode.parentNode.innerHTML='<td><input type="checkbox" name="checkbox"></td><td>'+_name.value+'</td><td>'+room.value+'</td><td>'+tel.value+'</td><td>'+sex.value+'</td> <td><button οnclick="Del(this)">删除</button> </td><td><button οnclick="Edit(this)">修改</button></td>';
create_table.style.display="none";
}
}
</script>
</html>
css代码
*{
padding: 0;
margin: 0;
}
.search_box{
position: relative;
margin:20px auto;
width: 400px;
}
#search{
position: absolute;
top:0;
left: 0;
padding-left: 20px;
box-sizing: border-box;
width: 340px;
height: 50px;
font-size: 18px;
border:1px solid #96c8e1;
outline: none;
}
#search_btn{
position: absolute;
top:0;
right: 0;
font-size: 20px;
color: #093f5a;
font-weight: 700;
width: 60px;
height: 50px;
background-color:#96c8e1;
border:1px solid #96c8e1;
outline: none;
}
table{
margin: 160px auto;
text-align: center;
border-collapse: collapse;
color: #333;
font-size: 18px;
}
table tr:nth-child(1){
background-color: #f3b9e2;
}
table tr:nth-child(2){
background-color: #d8b9f2;
}table tr:nth-child(3){
background-color: #f0cdb7;
}table tr:nth-child(4){
background-color: #f3f2b9;
}table tr:nth-child(5){
background-color:#c3dbc5;
}table tr:nth-child(6){
background-color:#e8dacd;
}
table tr:nth-child(7){
background-color: #d3ccee;
}
tr{
border: 1px solid #fff;
height: 80px;
background-color:#d3ccee ;
}
tr:hover{
opacity:0.8;
}
td{
width: 120px;
border: 1px solid #fff;
}
#add{
float: right;
margin-right: 20px;
}
#select{
margin-left: 50%;
transform: translateX(-50%);
width: 200px;
height: 50px;
font-size: 20px;
line-height: 50px;
outline: none;
border: none;
color: #fff;
text-align: center;
background-color: #ec7259;
}
.create{
display: none;
position: fixed;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.create_center{
position: relative;
width: 600px;
height: 800px;
margin:80px auto;
background-color: #fff;
border-radius: 15px;
box-sizing: border-box;
}
#cha{
position: absolute;
right: 20px;
top:10px;
font-size: 30px;
}
label{
margin-left: 100px;
font-size: 20px;
}
.create_center>h2{
line-height: 50px;
text-align: center;
}
.create_center>input{
width: 250px;
height: 50px;
outline: none;
padding-left: 20px;
box-sizing: border-box;
font-size: 16px;
border-radius: 10px;
margin-top: 30px;
border:1px solid #a578dd;
}
#sure{
font-size: 20px;
width: 342px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #c3a8ea;
border-radius: 12px;
border:none;
outline: none;
margin-top:50px;
margin-left: 100px;
}
#editbtn{
font-size: 20px;
width: 342px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #f4eebe;
border-radius: 12px;
border:none;
outline: none;
margin-top:50px;
margin-left: 100px;
}
总结
表格并未采用cookie方式,所以增删查改的情况在网页刷新以后还是会回复为原来的状态