html
<body>
<div id="div1"class="div1 none" style="display: none"></div>
<div id="div2" class="div2 none" style="display: none">
<input type="text" name="bookName" id="bookName" placeholder=" 书籍名称："/>
<input type="text" name="bookPrice" id="bookPrice" value=" ¥ 99" />
<input class="btn" type="button" value="增加书籍"/>
</div>
<table border="1" cellspacing="0" cellpadding="10" >
<thead>
<tr>
<th>书籍</th>
<th>价格</th>
<th colspan="2">操作 | <input id="addBtnShow" class="btn" type="button" value="增加书籍"/> </th>
</tr>
</thead>
<tbody id="bookCon">
<tr>
<td id="tr1">第八条猎狗</td>
<td>¥22</td>
<td class="btn" >删除</td>
<td class="btn" >修改</td>
</tr>
<tr>
<td>不抱怨的世界</td>
<td>¥22</td>
<td class="btn" >删除</td>
<td class="btn" >修改</td>
</tr>
</tbody>
</table>
</body>
样式
.div1{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.div2{
position: absolute;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left:-170px;
width: 300px;
height:110px;
padding: 20px;
}
.div2 input{
width: 100%;
height: 30px;
margin: 2px 0;}
JavaScript
//新增
var addBtnShow = document.getElementById("addBtnShow");
var oDiv1 = document.getElementById("div1");
var oDiv2= document.getElementById("div2");
addBtnShow.onclick = function(){
if( oDiv1.style.display=="none"){
oDiv1.style.display="block";
oDiv2.style.display="block";
}
var arrInput =oDiv2.getElementsByTagName("input");
arrInput[arrInput.length-1].onclick =function(){
var s1= arrInput[0].value;
var s2= arrInput[1].value;
oDiv1.style.display="none";
oDiv2.style.display="none";
add(s1,s2);
};
};
//删除
var bookCon = document.getElementsByTagName("tbody")[0] ;
document.getElementsByTagName("tbody")[0].onclick = function(){
var arrtr = bookCon.getElementsByTagName( "tr") ;
var index = 0;
for( index=0; index<arrtr.length ;index++) {
var childrenTd = arrtr[index].children;
//删除
childrenTd[childrenTd.length - 2].onclick = function () {
del(this.parentNode.parentNode, this.parentNode);
};
}
//修改
for( index=0; index<arrtr.length ;index++){
var childrenTd = arrtr[index].children;
childrenTd[ childrenTd.length -1].onclick = function(){
var objTr = this.parentNode;
if( oDiv1.style.display=="none"){
oDiv1.style.display="block";
oDiv2.style.display="block";
}
//修改
var arrInput =oDiv2.getElementsByTagName("input");
arrInput[0].value =childrenTd[0].innerHTML ;
arrInput[1].value =childrenTd[1].innerHTML ;
arrInput[arrInput.length-1].value ="确定修改";
arrInput[arrInput.length-1].onclick =function(){
var s1= arrInput[0].value;
var s2= arrInput[1].value;
oDiv1.style.display="none";
oDiv2.style.display="none";
set(objTr,s1,s2);
};
};
}
};
//add 增加一条，放在倒数第二的位置即放在length-1的前面
function add(s1,s2){
var newTr =document.createElement("tr");
newTr.innerHTML=" <td>"+s1+"</td> <td>"+s2+"</td> " +'<td class="btn" >删除</td> <td class="btn" >修改</td>';
bookCon.insertBefore( newTr, bookCon.children[bookCon.children.length-1] )
}
//del 删除最后一个即删除tr下标为length-1
function del(p,obj){
if( p && obj )
p.removeChild( obj )
}
//修改
function set(objTr,s1,s2){
var newTr =document.createElement("tr");
newTr.innerHTML=" <td>"+s1+"</td> <td>"+s2+"</td> " +'<td class="btn" >删除</td> <td class="btn" >修改</td>';
bookCon.replaceChild( newTr,objTr )
}
