<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="600" border="1" id="tb1">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>鞋子a</td>
<td>10</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子b</td>
<td>20</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子c</td>
<td>30</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子d</td>
<td>40</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
<tr>
<td>鞋子e</td>
<td>50</td>
<td>99</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>
</table>
<table>
<tr>
<td>商品名称 </td>
<td><input id="name"/></td>
</tr>
<tr>
<td>数量 </td>
<td><input id="cnt"/></td>
</tr>
<tr>
<td>价格 </td>
<td><input id="price"/></td>
</tr>
</table>
<button onclick="add();">增加</button>
<script>
//增加
function add(){
var name=getEl("name").value;
getEl("name").value="";
var cnt=getEl("cnt").value;
getEl("cnt").value="";
var price=getEl("price").value;
getEl("price").value="";
var html=' <tr>
<td>'+name+'</td>
<td>'+cnt+'</td>
<td>'+price+'</td>
<td><input type="button" name="button" id="button" value="删除" onclick="del(this)" />
<input type="button" name="button2" id="button2" value="修改" onclick="edit(this)"/>
<input type="button" name="button3" id="button3" value="确定" onclick="ok(this)" style="display:none"/>
<input type="button" name="button4" id="button4" value="取消" onclick="cancel(this)" style="display:none"/></td>
</tr>';
var tbody=getEls(tb,"tbody")[0];
var h=tbody.innerHTML;
tbody.innerHTML=h+html;
}
</script>
<script>
function getEl(id){return document.getElementById(id);}
function getEls(obj,tag){return obj.getElementsByTagName(tag);}
var tb=getEl("tb1");
//删除
function del(btn){
var td=btn.parentNode;
var tr=td.parentNode;
//alert(tr.innerHTML);
//alert(tr.outerHTML);
//alert(tr.innerText);
var index=tr.rowIndex;//获取行号
tb.deleteRow(index);
}
//修改
function edit(btn){
var td=btn.parentNode;
var tr=td.parentNode;
var oldCnt=tr.cells[1].innerText;
td.xxx=oldCnt;
//alert(oldCnt);
tr.cells[1].innerHTML="<input value='"+oldCnt+"'>";//将内容改为文本框
//隐藏编辑
btn.style.display="none";
var btns=getEls(td,"input");//找出同一个td中的所有按钮
btns[2].style.display="";
btns[3].style.display="";
}
//确定
function ok(btn){
var td=btn.parentNode;
var tr=td.parentNode;
var txtTd=tr.cells[1];//文本框所在的td
var txt=getEls(txtTd,"input")[0];//找到文本框
var cnt=txt.value;
txtTd.innerText=cnt;
var btns=getEls(td,"input");//找出同一个td中的所有按钮
btns[1].style.display="";
btns[2].style.display="none";
btns[3].style.display="none";
}
//取消
function cancel(btn){
var td=btn.parentNode;
var tr=td.parentNode;
var txtTd=tr.cells[1];//文本框所在的td
txtTd.innerText=td.xxx;//原数量
var btns=getEls(td,"input");//找出同一个td中的所有按钮
btns[1].style.display="";
btns[2].style.display="none";
btns[3].style.display="none";
}
</script>
</body>
</html>