【急】雪地里跪求,在线等

咔哇伊 2013-09-20 07:46:41

怎么单击修改的时候,把数量变成文本框,而且里面有数量

<script type="text/javascript">
function dele(id){
var docu=document.getElementById(id).rowIndex;
document.getElementById("table1").deleteRow(docu);
}
function upd(id,a){
var v=document.getElementById("t1").rowIndex;
}
</script>
</head>
<body>
<table id="table1" border="1px">
<tr style="text-align:center; font-weight:bold;">
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>操作</td>
</tr>
<tr id="tr2">
<td>玫瑰保湿睡眠面膜</td>
<td>5</td>
<td>¥48</td>
<td><input type="button" value="删除" onclick="dele('tr2')"/>
<input id="t1" type="button" value="修改" onchange="upd('tr2',this)" /></td>
</tr>
<tr style="text-align:center">
<td colspan="4"><input type="button" value="增加订单" /></td>
</tr>
</table>
...全文
299 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
咔哇伊 2013-10-02
  • 打赏
  • 举报
回复
谢谢各位 非常感谢
86y 2013-09-21
  • 打赏
  • 举报
回复
修改了一下楼上的

<!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>
    #price{width:100%;border:none   }
</style>
</head>

<body>

<script type="text/javascript"> 
function dele(id){
    var docu=document.getElementById(id).rowIndex;
    document.getElementById("table1").deleteRow(docu);
    }
function upd(id,a){
  
     var td=a.parentNode.parentNode.getElementsByTagName('td')['suliang']
   var input=td.getElementsByTagName('input')[0] ;
   var v=td.innerHTML.match(/\d+/)||0;
   if(!input ){
       var w=td.offsetWidth-2;
       td.innerHTML= '<input id="price"  />';
       var input=td.getElementsByTagName('input')[0] ;
       input.style.width=w +'px';
       input.value=v;
       input.focus();
   }
    }
function save(id,a){  
    var td=a.parentNode.parentNode.getElementsByTagName('td')['suliang'];
   	td.innerHTML=td.getElementsByTagName('input')[0].value;
}

</script>
</head>
<body>
<table id="table1" border="1px">
  <tr style="text-align:center; font-weight:bold;">
    <td>商品名称</td>
    <td>数量</td>
    <td>单价</td>
    <td>操作</td>
  </tr>
  <tr id="tr2">
    <td>玫瑰保湿睡眠面膜</td>
    <td id="suliang">5</td>
    <td id="priceTd" >¥48</td>
    <td><input type="button" value="删除"  onclick="dele('tr2')"/>
      <input  id="t1" type="button" value="修改" onclick="upd('tr2',this)" /> <input  id="save" type="button" value="保存" onclick="save('tr2',this)" /></td>
  </tr>
  <tr style="text-align:center">
    <td colspan="4"><input type="button" value="增加订单" /></td>
  </tr>
</table>
</body>
</html>
咔哇伊 2013-09-20
  • 打赏
  • 举报
回复
引用
3
如果我想单击修改名称的时候那他不就匹配不了了吗,是0了,怎么办呢
咔哇伊 2013-09-20
  • 打赏
  • 举报
回复
想在完善一下,现在单击修改变成文本框了而且里面有值了,那我怎么修改完了值在变成普通文本呢加一个回button
咔哇伊 2013-09-20
  • 打赏
  • 举报
回复
谢谢各位了,互相帮助啊
plzzz 2013-09-20
  • 打赏
  • 举报
回复
做一个浮动的 input 盖住要修改的TD,完成之后更新到TD中去然后隐藏input, 这样的话,只用一个 input 就能修改所有 TD 单元,或者符合修改条件的TD
KK3K2005 2013-09-20
  • 打赏
  • 举报
回复
改变样式就可以了 onblur的时候 文本框要看起来就像白纸一样没有边框 onfocu的时候 文本框的边框出现
fzfei2 2013-09-20
  • 打赏
  • 举报
回复


<style>
	#price{width:100%;border:none   }
	
</style>
<script type="text/javascript"> 
function dele(id){
	var docu=document.getElementById(id).rowIndex;
	document.getElementById("table1").deleteRow(docu);
	}
function upd(id,a){
 
	 var td=a.parentNode.parentNode.getElementsByTagName('td')['priceTd']
   var input=td.getElementsByTagName('input')[0] ;
   var v=td.innerHTML.match(/\d+/)||0;
   if(!input ){
   	var w=td.offsetWidth-2;
   	td.innerHTML= '<input id="price"  />';
   	var input=td.getElementsByTagName('input')[0] ;
   	input.style.width=w +'px';
   	input.value=v;
   	input.focus();
   }
	}
</script>
</head>
<body>
<table id="table1" border="1px">
  <tr style="text-align:center; font-weight:bold;">
    <td>商品名称</td>
    <td>数量</td>
    <td>单价</td>
    <td>操作</td>
  </tr>
  <tr id="tr2">
    <td>玫瑰保湿睡眠面膜</td>
    <td>5</td>
    <td id="priceTd" >¥48</td>
    <td><input type="button" value="删除"  onclick="dele('tr2')"/>
      <input  id="t1" type="button" value="修改" onclick="upd('tr2',this)" /></td>
  </tr>
  <tr style="text-align:center">
    <td colspan="4"><input type="button" value="增加订单" /></td>
  </tr>
</table>

lzpggg 2013-09-20
  • 打赏
  • 举报
回复
或者你放上一个隐藏的输入框,点击的时候让他显示出来,隐藏原来的框也行
lzpggg 2013-09-20
  • 打赏
  • 举报
回复
你在<td>数量</td>一开始就放上编辑框,属性disabled="disabled",点击的时候用js把他改回来就行了,如果disabled了与其他列看起来不一样,你还可以用css修改一下!

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧