怎么用javascript修改表格中的按钮的值??和把文本换成表单的文本域
RT表格id为tab<tr><tdheight="25"><divalign="center">100</div></td><td><divalign="center">...
RT
表格id为tab
<tr>
<td height="25"><div align="center">100</div></td>
<td><div align="center">50</div></td>
<td><div align="center">500</div></td>
<td><div align="center">
<label>
<input type="button" name="button" value="删除" />
</label>
<label>
<input type="button" name="button2" value="修改" />
</label>
</div></td>
</tr>
点击修改按钮的时候,把修改按钮的值变成确定,并且把100,50,500都变成表单里面的文本域,并且把100,50和500都显示出来.
在点击确定的时候在把文本域里的值显示成文本.
还有单击删除的时候删除那一行(点击的那个删除按钮的行.别的行不删) 展开
表格id为tab
<tr>
<td height="25"><div align="center">100</div></td>
<td><div align="center">50</div></td>
<td><div align="center">500</div></td>
<td><div align="center">
<label>
<input type="button" name="button" value="删除" />
</label>
<label>
<input type="button" name="button2" value="修改" />
</label>
</div></td>
</tr>
点击修改按钮的时候,把修改按钮的值变成确定,并且把100,50,500都变成表单里面的文本域,并且把100,50和500都显示出来.
在点击确定的时候在把文本域里的值显示成文本.
还有单击删除的时候删除那一行(点击的那个删除按钮的行.别的行不删) 展开
1个回答
展开全部
<td><div align="center">50</div></td>
<label><input type="button" name="button2" value="修改" /></label>
很好奇为什么会这样写？给你段代码，自己去修改。这段代码还可以写的更精简，自己去处理下吧。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#book{
border:0px;
width:400px;
}
#book tr td{
border:1px solid #0085c2;
}
</style>
</head>
<body>
<table id="book">
<tr>
<td>书名</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="lm">
<td>流氓是怎么成功的</td>
<td><span id="num1">1</span></td>
<td>￥100</td>
<td>
<input type="button" value="修改" id="b1" onclick="update('b1','num1')" />
</td>
</tr>
<tr id="jt">
<td>今天的明天</td>
<td><span id="num2">1</span></td>
<td>￥50</td>
<td>
<input type="button" value="修改" id="b2" onclick="update('b2','num2')" />
</td>
</tr>
<tr id="xf">
<td>幸福的天使</td>
<td><span id="num3">1</span></td>
<td>￥20</td>
<td>
<input type="button" value="修改" id="b3" onclick="update('b3','num3')" />
</td>
</tr>
</table>
<script type="text/javascript">
function update(bottunId,spanId){
//获得当前对象父节点
var parentChild = document.getElementById(spanId).parentNode;
//获得按钮对象
var button = document.getElementById(bottunId);
//获得要修改的对象
var oldElement = document.getElementById(spanId);
//判断是否为修改
if(button.value == "修改"){
//创建新元素
var newElement = document.createElement("input");
//设置属性值
newElement.setAttribute("type","text");
newElement.setAttribute("id",oldElement.id);
newElement.style['width'] = '50px';
newElement.setAttribute("value",oldElement.innerHTML);
//替换以前的节点
parentChild.replaceChild(newElement,oldElement);
//修改按钮值
button.value = "确定";
}else{
var oldElement = document.getElementById(spanId);
var newElement = document.createElement("span");
newElement.setAttribute("id",oldElement.id);
newElement.innerHTML = oldElement.value;
parentChild.replaceChild(newElement,oldElement);
button.value = "修改";
}
}
</script>
</body>
</html>
<label><input type="button" name="button2" value="修改" /></label>
很好奇为什么会这样写？给你段代码，自己去修改。这段代码还可以写的更精简，自己去处理下吧。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#book{
border:0px;
width:400px;
}
#book tr td{
border:1px solid #0085c2;
}
</style>
</head>
<body>
<table id="book">
<tr>
<td>书名</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="lm">
<td>流氓是怎么成功的</td>
<td><span id="num1">1</span></td>
<td>￥100</td>
<td>
<input type="button" value="修改" id="b1" onclick="update('b1','num1')" />
</td>
</tr>
<tr id="jt">
<td>今天的明天</td>
<td><span id="num2">1</span></td>
<td>￥50</td>
<td>
<input type="button" value="修改" id="b2" onclick="update('b2','num2')" />
</td>
</tr>
<tr id="xf">
<td>幸福的天使</td>
<td><span id="num3">1</span></td>
<td>￥20</td>
<td>
<input type="button" value="修改" id="b3" onclick="update('b3','num3')" />
</td>
</tr>
</table>
<script type="text/javascript">
function update(bottunId,spanId){
//获得当前对象父节点
var parentChild = document.getElementById(spanId).parentNode;
//获得按钮对象
var button = document.getElementById(bottunId);
//获得要修改的对象
var oldElement = document.getElementById(spanId);
//判断是否为修改
if(button.value == "修改"){
//创建新元素
var newElement = document.createElement("input");
//设置属性值
newElement.setAttribute("type","text");
newElement.setAttribute("id",oldElement.id);
newElement.style['width'] = '50px';
newElement.setAttribute("value",oldElement.innerHTML);
//替换以前的节点
parentChild.replaceChild(newElement,oldElement);
//修改按钮值
button.value = "确定";
}else{
var oldElement = document.getElementById(spanId);
var newElement = document.createElement("span");
newElement.setAttribute("id",oldElement.id);
newElement.innerHTML = oldElement.value;
parentChild.replaceChild(newElement,oldElement);
button.value = "修改";
}
}
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
