Js dynamic form of additions and deletions to change search the complete code

<!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 = "Please enter the name" class = "int"> <br>
M / F" class = "int"> <br>Gender: <input type = "text"
Age: <input type = "text" name = "" placeholder = " Please enter the age of" class = "int"> <br>
Tel: <input type = "text" name = "" placeholder = " Please enter the phone" class = "int"> <br>
Birthplace: <input type = "text" name = "" placeholder = " Please enter the place of origin" class = "int"> <br>
Description: <input type = "text" name = " "placeholder =" Introduction "class =" int "> <br>
entry time: <input type =" text " name =" "placeholder =" Please enter the entry time "class =" int ">
</ form>
<the Button class = "box1"> empty </ Button>
<Button class = "BOX2"> determined </ Button>
<Button class = "BOX3"> Add </button>
<button class="box4">取消</button>
</div>

the Data = var [
{ "name": "Joe Smith", "gender": "male", "age": 20, "Tel": 13076752470, "place of origin": "Hubei", "Introduction": "no" "entry time": "2011"},
{ "name": "Zhao Xiaoxiao," "gender": "female", "age": 19, "Tel": 15921347851, "place of origin": "Hunan" "Introduction": "no", "entry time": "2011"},
{ "name": "money book Yi", "sex": "female", "age": 21, "Tel": 17254863571 "Hometown": "Beijing", "Introduction": "no", "entry time": "2011"},
{ "name": "Zhou", "gender": "male", "age": 25 "Tel": 15767546842, "place of origin": "Zhejiang", "Introduction": "no", "Entry time ":" 2011 "},
{" name ":" Wang five "," gender ":" male "," age ": 34," Tel ": 12474855680," place of origin ":" Tianjin "," Introduction ":" no "," entry time ":" 2011 "},
{" name ":" Zheng dream "," gender ":" male "," age ": 25," Tel ": 15124875401" Hometown ":" Hebei "," Introduction ":" no "," entry time ":" 2011 "}
];Hebei "," Introduction ":" no "," entry time ":" 2011 "} ];Hebei "," Introduction ":" no "," entry time ":" 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);
}

// Select event
var = All document.querySelector ( "thead> td: First-Child> the INPUT");
// find a table below thead td Dir of input, binding its click event
all.onclick function = () {
var = CHB document.querySelectorAll ( "Table> tbody> TR> td: first-Child> input");
// Get all tbody td first input of the Table
for (I = 0 var ; I <chb.length; I ++) {
// iterate each array chb chb
chb [I] = .checked this.checked;
// make the state of each of the related chb All have the same status
}
}

// single select cancel
var = CHB document.querySelectorAll ( "Table> tbody> TR> td: First-Child> input");
// Find all the first table tbody td at the input is stored in chbs
for (var I = 0; I <chb.length; I ++) {
// iterate each array chb chb
chb [I] .onclick = function () {
// click event for the current chb binding
if (this!. the checked) {
// if the current chb unchecked
all.checked = to false;
// All modifications unchecked
}
the else {
var UNSEL = document.querySelectorAll ( "Table> tbody TD: First-Child> INPUT: not (: the checked) ");
// get a first input unSel td all of the unselected in Table tbody
IF (unSel.length == 0) {
// if the length is equal to UNSEL 0
all.checked = to true;
// All modified to select
} the else {
all.checked = to false;
// All modifications unchecked
}
}
}
}

//修改事件
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;
}
}

Job (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);
a.removeChild(tr)
alert("是否删除！");
}

// 取消
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)
}

// 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);
}

I do not know how the idea of a place to see before analysis

Js dynamic form of additions and deletions to change search the complete code

Guess you like