Javascript_Table_DOM
来源:互联网 发布:查看电脑端口占用情况 编辑:程序博客网 时间:2024/04/29 20:01
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">
function oprates(btn){
if(btn.firstChild.nodeValue=="修改"){
btn.firstChild.nodeValue="保存";
btn.nextSibling.firstChild.nodeValue="取消";
btn.parentNode.previousSibling.firstChild.style.display='none';
btn.parentNode.previousSibling.lastChild.style.display='block';
var previousSiblingTR = btn.parentNode.parentNode.previousSibling;
while(previousSiblingTR!=null){
if(previousSiblingTR.lastChild.firstChild.nodeValue!="操作"){
if
(previousSiblingTR.lastChild.lastChild.firstChild.nodeValue=="取消"){
oprates(previousSiblingTR.lastChild.lastChild);
}
}
previousSiblingTR=previousSiblingTR.previousSibling;
}
var nextSiblingTR = btn.parentNode.parentNode.nextSibling;
while(nextSiblingTR!=null){
if(nextSiblingTR.lastChild.lastChild.firstChild.nodeValue=="取
消"){
oprates(nextSiblingTR.lastChild.lastChild);
}
nextSiblingTR = nextSiblingTR.nextSibling;
}
return;
}
if(btn.firstChild.nodeValue=="删除"){
btn.parentNode.parentNode.removeNode(true);
return;
}
if(btn.firstChild.nodeValue=="保存"){
btn.firstChild.nodeValue="修改";
btn.nextSibling.firstChild.nodeValue="删除";
btn.parentNode.previousSibling.firstChild.style.display="block";
btn.parentNode.previousSibling.lastChild.style.display="none";
btn.parentNode.previousSibling.firstChild.firstChild.nodeValue=btn.parentNode.previousSibling.last
Child.value;
return;
}
if(btn.firstChild.nodeValue=="取消"){
btn.previousSibling.firstChild.nodeValue="修改";
btn.firstChild.nodeValue="删除";
btn.parentNode.previousSibling.firstChild.style.display="block";
btn.parentNode.previousSibling.lastChild.style.display="none";
btn.parentNode.previousSibling.lastChild.value=btn.parentNode.previousSibling.firstChild.firstChil
d.nodeValue;
return;
}
}
</script>
<style>
input{
border:solid 1px #00F;
}
tr{
height:30px;
}
td{
text-align:center;
}
</style>
<body>
<h3 align="center">我的购物车</h3>
<form>
<table border="1" width="360px" cellpadding="0" cellspacing="0" id="goods_tb" align="center">
<tr>
<th width="80px">商品</th>
<th width="60px">价格</th>
<th width="140px">数量</th>
<th width="80px">操作</th>
</tr>
<tr>
<td>数学</td>
<td>40</td>
<td><span>1</span><input type="text" style="display:none" value="1" /></td>
<td><a href="#" onClick="oprates(this)">修改</a><a href="#" onClick="oprates(this)">删除
</a></td>
</tr>
<tr>
<td>English</td>
<td>35</td>
<td><span>3</span><input type="text" style="display:none" value="3" /></td>
<td><a href="#" onClick="oprates(this)">修改</a><a href="#" onClick="oprates(this)">删除
</a></td>
</tr>
</table>
</span>
</body>
</html>
- Javascript_Table_DOM
- nginx 配置
- More Effectvie C++笔记(三)--谨慎定义类型转换函数、自增、自减操作符前缀形式与后缀形式的区别
- 我又跑跑了
- Ruby CGI lib compare with Python CGI lib: Get form value
- 让程序在崩溃时体面的退出(合集)
- Javascript_Table_DOM
- AppWidget之应用入门[实时更新系统当前时间]
- 人件
- java中this与super区别,重载和重写区别
- 你的密码安全吗?来用 GPU 暴力破解密码
- Jquery中next和children的区别
- 在二元树中找出和为某一值的所有路径的个人代码
- LINUX虚拟文件系统
- H264参数结构一:元素的分层结构