这边实例确定的能帮助大家更好的理解原生和DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格dome</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
th{
width: 120px;
height: 26px;
}
.active{
height: 40px;
}
.active input{
border: none;
display: inline-block;
height: 40px;
}
.active span{
display: inline-block;
width: 45px;
}
.active td:last-of-type{
width: 150px;
}
button{
width: 50px;
height: 30px;
font-size: 15px;
text-align: center;
line-height: 30px;
}
button:last-of-type{
margin-left: 210px;
}
#box{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
}
.context{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
background: gainsboro;
}
.context>div{
margin: auto;
width: 230px;
height: 200px;
margin-top: 100px;
}
.context>div p {
margin: 23px 0 44px 0;
}
</style>
</head>
<body>
<form action="" id="myFrom">
<table border="1px solid" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr class="active">
<td><input type="text" value="jack" /></td>
<td><input type="text" value="18" /></td>
<td><input type="text" value="北京市" /></td>
<td>
<span class="revise">修改</span>
<span class="prev">保存</span>
<span class="del">删除</span>
</td>
</tr>
<tr class="active">
<td><input type="text" value="lily" /></td>
<td><input type="text" value="20" /></td>
<td><input type="text" value="上海市" /></td>
<td>
<span class="revise">修改</span>
<span class="prev">保存</span>
<span class="del">删除</span>
</td>
</tr>
</tbody>
</table>
</form>
<button type="button" name="button">添加</button>
<div id="box" style="display: none;">
<div class="context">
<div>
<p>姓名：<input type="text" class="name1"></p>
<p>年龄：<input type="text" class="age"></p>
<p>住址：<input type="text" class="adress"></p>
</div>
<button>提交</button>
</div>
</div>
<script type="text/javascript">
//获取所有的input元素
var inputs = document.getElementById('myFrom').getElementsByTagName('input');
//获取修改按钮
var revises = document.getElementsByClassName('revise');
//获取保存按钮
var prevs = document.getElementsByClassName('prev');
//获取删除按钮
var dels = document.getElementsByClassName('del');
//获取添加按钮
var buttonEle = document.getElementsByTagName('button')[0];
//获取提交按钮
var buttonEle1 = document.getElementsByTagName('button')[1];
//获取遮罩层id
var box = document.getElementById('box');
//获取 姓名 年龄 地址
var name1 = document.getElementsByClassName('name1')[0];
var age = document.getElementsByClassName('age')[0];
var adress = document.getElementsByClassName('adress')[0];
//获取tbody
var tbodyEle = document.getElementsByTagName('tbody')[0];
//封装的方法，改变所有input元素的readOnly属性
function changeReOn(inputs,flag){
for(var i=0; i<inputs.length; i++){
inputs[i].readOnly = flag;
}
}
//先让所有的内容不可被修改
changeReOn(inputs,true);
//点击修改之后就可以修改了
for(var j=0; j<revises.length; j++){
revises[j].onclick = function(){
//修改你点击的”修改“按钮的tr里面的所有的input
var trInputs = this.parentNode.parentNode.getElementsByTagName('input');
changeReOn(trInputs,false);
}
//点击保存之后不可修改
prevs[j].onclick = function(){
var trInputs = this.parentNode.parentNode.getElementsByTagName('input');
changeReOn(trInputs,true);
}
//删除点击的当行
dels[j].onclick = function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
//点击添加之后遮罩层出现
buttonEle.onclick = function(){
box.style.display = 'block';
}
//点击提交之后遮罩层消失
buttonEle1.onclick = function(){
var trEle = document.createElement('tr');
var namevalue = name1.value;
console.log(namevalue);
var agevalue = age.value;
var adreevalue = age.value;
trEle.innerHTML = `
<td><input type="text" value="${namevalue}" /></td>
<td><input type="text" value="${agevalue}" /></td>
<td><input type="text" value="${adreevalue}" /></td>
<td>
<span class="revise">修改</span>
<span class="prev">保存</span>
<span class="del">删除</span>
</td>
`;
var update = document.getElementsByClassName('revise')[0];
update.onclick = function(){
var trInputs1 = this.parentNode.parentNode.getElementsByTagName('input');
changeReOn(trInputs1,false);
};
var prev1 = document.getElementsByClassName('prev')[0];
prev1.onclick = function(){
var trInputs1 = this.parentNode.parentNode.getElementsByTagName('input');
changeReOn(trInputs1,true);
};
var del1 = document.getElementsByClassName('del')[0];
del1.onclick = function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
tbodyEle.appendChild(trEle);
trEle.clssName = 'active';
box.style.display = 'none';
}
</script>
</body>
</html>
