js的动态表格的增删改查完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
position: relative;
}
.head{
width: 700px;
height: 50px;
margin: 25px auto;
/*border:1px solid red;*/
}
.but{
margin-left: 500px;
}
td{
text-align: center;
line-height: 50px;
font-size: 20px;
font-weight:bold;
width: 120px;
height:30px;
border:1px solid black;
}
.box{
width: 250px;
height: 250px;
border:1px solid black;
position: absolute;
background-color: red;
text-align: right;
top:200px;
left: 800px;
display: none;
z-index: 100;
}
.box>button{
margin-top:10px;
}
</style>
</head>
<body>
<div class="head">
联系电话:<input type="text" name="" class="phone"> <button class="button">查询</button></br>
<button class="but">删除</button>
<button class="but1">添加</button>
</div>
<div class="box">
<form >
姓名:<input type="text" name="" placeholder="请输入姓名" class="int"><br>
性别:<input type="text" name="" placeholder="男/女" class="int"><br>
年龄:<input type="text" name="" placeholder="请输入年龄" class="int"><br>
联系电话:<input type="text" name="" placeholder="请输入电话" class="int"><br>
籍贯:<input type="text" name="" placeholder="请输入籍贯" class="int"><br>
简介:<input type="text" name="" placeholder="简介" class="int"><br>
入职时间:<input type="text" name="" placeholder="请输入入职时间" class="int">
</form>
<button class="box1">清空</button>
<button class="box2">确定</button>
<button class="box3">添加</button>
<button class="box4">取消</button>
</div>
<script src="01.js"></script>
</body>
</html>
var data = [
{"姓名":"张三","性别":"男","年龄":20,"联系电话":13076752470,"籍贯":"湖北","简介":"没有","入职时间":"2011年"},
{"姓名":"赵晓晓","性别":"女","年龄":19,"联系电话":15921347851,"籍贯":"湖南","简介":"没有","入职时间":"2011年"},
{"姓名":"钱书怡","性别":"女","年龄":21,"联系电话":17254863571,"籍贯":"北京","简介":"没有","入职时间":"2011年"},
{"姓名":"周明","性别":"男","年龄":25,"联系电话":15767546842,"籍贯":"浙江","简介":"没有","入职时间":"2011年"},
{"姓名":"王五","性别":"男","年龄":34,"联系电话":12474855680,"籍贯":"天津","简介":"没有","入职时间":"2011年"},
{"姓名":"郑梦","性别":"男","年龄":25,"联系电话":15124875401,"籍贯":"河北","简介":"没有","入职时间":"2011年"},
];
var bodys = document.body;
var table = document.createElement("table");
bodys.appendChild(table);
table.style.width="1080px";
// table.style.height="1000px";
table.style.margin="0 auto";
table.style.border="1px solid black";
function ayy(data){
document.getElementsByTagName('table')[0].innerHTML = '';
var thead = document.createElement("thead");
table.appendChild(thead);
//添加表头
for(key in data[0]){
var td = document.createElement("td");
td.innerHTML=key;
var a=thead.appendChild(td);
}
var tbody = document.createElement("tbody");
table.appendChild(tbody);
tbody.className="a";
//添加内容
for(var i=0;i<data.length;i++){
var tr=document.createElement("tr");
var s = tbody.appendChild(tr);
tr.style.width="1080px";
tr.style.height="30px";
tr.style.border="1px solid black";
for(var j in data[i]){
var td =document.createElement("td");
td.innerHTML = data[i][j];
var c=tr.appendChild(td);
}
}
//追加全选
var tables= document.getElementsByTagName("table")[0].firstElementChild.firstElementChild
var tds =document.createElement("td");
tds.innerHTML = '<input type="checkbox" class="a"/>全选';
thead.insertBefore(tds,tables);
tds.className="all";
//追加操作
var tables= document.getElementsByTagName("table")[0].firstElementChild.firstElementChild
var tds1 =document.createElement("td");
tds1.innerHTML = '操作';
thead.appendChild(tds1);
//追加单个input的框；
var a=document.getElementsByTagName('tbody')[0].children;
for(var j=0;j<a.length;j++){
var trs= a[j].firstElementChild;
var tdss =document.createElement("td");
tdss.innerHTML = '<input type="checkbox"/>';
a[j].insertBefore(tdss,trs);
tdss.className="chb";
}
//追加删除和修改
var a=document.querySelectorAll(".a tr");
for(var j=0;j<a.length;j++){
var trs= a[j].firstElementChild;
var tdss1 =document.createElement("td");
tdss1.innerHTML = '<button class="but1">修改</button></br><button class="but2">删除</button>';
a[j].appendChild(tdss1);
}
//全选事件
var all = document.querySelector("thead>td:first-child>input");
// 找到table下面thead下第一个td中的input，为其绑定单击事件
all.onclick= function(){
var chb=document.querySelectorAll("table>tbody>tr>td:first-child>input");
// 获取table下tbody下所有第一个td中的input
for(var i= 0;i<chb.length;i++){
// 遍历chb数组中每个chb
chb[i].checked=this.checked;
// 让每一个chb的状态都跟All得状态一样
}
}
// 单个选中取消操作
var chb=document.querySelectorAll("table>tbody>tr>td:first-child>input");
// 找到table下tbody下的所有第一个td中的input 保存在chbs
for(var i=0;i<chb.length;i++){
// 遍历chb数组中每个chb
chb[i].onclick=function(){
// 为当前chb绑定单击事件
if(!this.checked){
// 如果当前chb未选中
all.checked=false;
// all修改为未选中
}
else{
var unSel = document.querySelectorAll("table>tbody td:first-child>input:not(:checked)");
// 获得table中tbody下所有第一个td中的未选中的input unSel
if(unSel.length==0){
// 如果unSel的length是等于0
all.checked=true;
// all修改为选中
}else{
all.checked=false;
// all修改为未选中
}
}
}
}
//修改事件
var but1= document.getElementsByClassName("but1");
// console.log(but1);
for(var j=0;j<but1.length;j++){
but1[j].onclick = fun
}
//删除事件
var but2 = document.getElementsByClassName("but2");
for(var i = 0;i<but2.length;i++){
but2[i].onclick = fun2;
}
}
ayy(data)
function fun(){
document.getElementsByClassName("box")[0].style.display = "block";
var tr= this.parentNode.parentNode;
var td = tr.getElementsByTagName("td");
var input = document.getElementsByClassName("int");
// console.log(input)
for (var i = 0;i < input.length;i++) {
input[i].value = td[i+1].innerHTML;
}
//确定
var box2 = document.getElementsByClassName("box2")[0];
box2.onclick = function(){
document.getElementsByClassName("box")[0].style.display = "none";
// var tr= document.getElementsByTagName("tr");
// for(var n = 0;n<tr.length;n++){
var td = tr.getElementsByTagName("td");
// }
var input = document.getElementsByClassName("int");
for (var i = 0;i<input.length;i++){
td[i+1].innerHTML = input[i].value;
}
}
}
//清空
var box1 = document.getElementsByClassName("box1")[0];
box1.onclick =function(){
var input = document.getElementsByClassName("int");
for (var i = 0;i < input.length;i++) {
input[i].value = "";
}
}
//删除
function fun2(){
var tr= this.parentNode.parentNode;
// console.log(tr);
var a =document.getElementsByTagName("tbody")[0];
// console.log(a);
if(confirm("是否删除！")==true){
a.removeChild(tr);
}
}
// 取消
var box4 = document.getElementsByClassName("box4")[0];
box4.onclick = function(){
document.getElementsByClassName("box")[0].style.display = "none";
}
//添加
var but1 = document.getElementsByClassName("but1")[0];
but1.onclick = function(){
document.getElementsByClassName("box")[0].style.display = "block";
}
var input = document.getElementsByClassName("int");
var box3 = document.getElementsByClassName("box3")[0];
box3.onclick = function(){
var obj = {};
for(var i=0;i<input.length;i++){
obj[i]=input[i].value;
}
data.push(obj)
ayy(data)
}
//全部删除（这个不建议使用）
//var but = document.getElementsByClassName("but")[0];
//but.onclick = function(){
//var bodys = document.body;
//var tables= document.getElementsByTagName("table")[0];
//console.log(tables);
//bodys.removeChild(tables);
//alert("确定全部删除！");
//}
//全部删除(全部删除用这个比较好，因为这个结合了前面的单选框)
var but = document.getElementsByClassName("but")[0];
but.onclick = function(){
var b = confirm("是否删除!")
var chb=document.querySelectorAll("table>tbody>tr>td:first-child>input");
for(var i = 0;i<chb.length;i++){
if(chb[i].checked==true){
var tr = chb[i].parentNode.parentNode;
console.log(tr)
var a =document.getElementsByTagName("tbody")[0];
if(b==true){
a.removeChild(tr)
}
}
}
}
// 查询
// input框
var phone = document.getElementsByClassName("phone")[0];
// console.log(phone);
var button = document.getElementsByClassName("button")[0];
// console.log(button);
button.onclick = function(){
// var a1=document.querySelectorAll(".a tr");
// var a1 = document.querySelectorAll("table tbody tr td:nth-child(5)");
// console.log(a1);
// var arr = [];
// for(var i= 0;i<a1.length;i++){
// var td = tr.getElementsByTagName("td");
// }
// for(var i = 0 ,arr =[]; i<a1.length;i++){
// if(a1[i].innerHTML.indexOf(phone.value) != -1){
// arr.push(a1[i])
// }
// }
// ayy(arr);
//
var arr = [];
for(var i =0;i<data.length;i++){
if(data[i]["联系电话"]==phone.value){
arr.push(data[i]);
}
}
ayy(arr);
}
不懂得地方看前一篇的思路分析
这里我要补充一点，我删除弹框用的不太好；建议用confirm（），应为这个提示框有返回值，这个alert（），没有返回值，不符合我们在页面的正常使用。
js的动态表格的增删改查完整代码的更多相关文章
- js的动态表格的增删改查思路
1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...
- 【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- 用 JS（JavaScript ）实现增删改查
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- 用AngularJS实现对表格的增删改查（仅限前端）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]
SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数 --创建表格 create table aa ( UserName varchar(50 ...
- 基于AT UI实现表格的增删改查遇到的坑
基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...
随机推荐
- python基础-并发编程part01
并发编程 操作系统发展史 穿孔卡片 读取数据速度特别慢,CPU利用率极低 单用户使用 批处理 读取数据速度特别慢,CPU利用率极低 联机使用 脱机批处理(现代操作系统的设计原理) 读取数据速度提高 C ...
- spring源码学习五 - xml格式配置，如何解析
spring在注入bean的时候,可以通过bean.xml来配置,在xml文件中配置bean的属性,然后spring在refresh的时候,会去解析xml配置文件,这篇笔记,主要来记录.xml配置文件 ...
- tp5引用第三方类vendor或extend（多种方法）
extend 方法一:命名空间引入 我们只需要把自己的类库包目录放入EXTEND_PATH目录(默认为extend,可配置),就可以自动注册对应的命名空间,例如: 我们在extend目录下面新增一个l ...
- [leetcode] H-Index (Hash Table)
题目: Given an array of citations (each citation is a non-negative integer) of a researcher, write a f ...
- Golang中的布隆过滤器
目录 1. 布隆过滤器的概念 2. 布隆过滤器应用场景 3. 布隆过滤器工作原理 4. 布隆过滤器的优缺点 5. 布隆过滤器注意事项 6. Go实现布隆过滤器 1. 布隆过滤器的概念 布隆过滤器(Bl ...
- luogu P3110 [USACO14DEC]驮运Piggy Back |最短路
题目描述 Bessie and her sister Elsie graze in different fields during the day, and in the evening they b ...
- ThinkPHP的视图和模板
简单来说一个控制器对应一个视图,一个方法对应一个模板下面我们直接上图. 二.给模板赋值 给模板赋值在这里用到了assign()这个函数,assign()函数第一个参数为给这个值自定义名称,第二个参数则 ...
- 转 与App Store审核的斗智斗勇
原文链接:http://www.cocoachina.com/bbs/read.php?tid-326229.html 提交了4.5个新的app,以及每个版本更新了十几次版本之后,总算是有那么点心得可 ...
- 如何在ASP.NET Core 中快速构建PDF文档
比如我们需要ASP.NET Core 中需要通过PDF来进行某些简单的报表开发,随着这并不难,但还是会手忙脚乱的去搜索一些资料,那么恭喜您,这篇帖子会帮助到您,我们就不会再去浪费一些宝贵的时间. 在本 ...
- [Python Basics]引用系统(The Import System)
欲上高楼去避愁,愁还随我上高楼.经行几处江山改,多少亲朋尽白头. 归休去,去归休.不成人总要封侯?浮云出处元无定,得似浮云也自由. 我从短暂的Python工作当中学到一件事,越是模块化,就越会发现py ...