点击按钮文字变成input框，点击保存变成文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<title>点击按钮文字变成input框，点击保存变成文字</title>
<style type="text/css">
table{ text-align: center; font-size: 14px;}
table>thead>tr>th{ font-weight: normal;}
.text-right{ padding-right:73px; text-align: right;}
.text{ width: 50px; height: 30px; border: 1px solid #ddd; text-align: center;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th width="400">品名</th>
<th width="200">件数</th>
</tr>
</thead>
<tbody>
<tr height="50">
<td>iPhone6s</td>
<td class="edit">2</td>
</tr>
<tr height="50">
<td>小米5</td>
<td class="edit">5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" class="text-right">
<button type="button" class="btn" onclick="change(this)">修改</button>
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
function change(obj){
var xg=$(obj).html();
if(xg=='修改'){
$('.edit').each(function(){
var old=$(this).html();
$(this).html("<input type='text' name='editname' class='text' value="+old+" >");
})
$(obj).html('保存');
}else if(xg=='保存'){
$('input[name=editname]').each(function(){
var old=$(this).html();
var newfont=$(this).parent('td').parent('tr').children().find('input').val();
$(this).parent('td').html(newfont);
})
$(obj).html('修改');
}
}
</script>
</body>
</html>
转载请带上原作者，谢谢合作！！！
点击按钮文字变成input框，点击保存变成文字的更多相关文章
- 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
- js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- div悬浮在屏幕的中间及点击按钮关闭弹出框
#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。
例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...
- 清除input框对浏览器保存的用户名和密码自动填充问题
清除input框对浏览器保存的用户名和密码自动填充问题: type类型写如下写法,聚焦的时候type类型为“password” <input ng-model="getpwd" ...
- jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
- Net实现钩子函数(Hook)以及通过SendMessage实现自动点击按钮和给文本框赋值
1.实现钩子函数 钩子(Hook)的实现需要三个主要的函数和一个委托 [DllImport("user32.dll", CharSet = CharSet.Auto, Callin ...
- angular input框点击别处 变成不可输入状态
<input type="text" ng-model="edit" ng-disabled="!editable" focus-me ...
随机推荐
- 作为平台的Windows PowerShell（二）
在此系列文章的前一篇,我们看到了怎样使用System.Management.Automation.PowerShell 类来在c#应用程序中运行PowerShell 命令.在那些例子中,我们创建的都是 ...
- [Bootstrap] 7. Working Herader
<header class="navbar navbar-default navbar-static-top"> <div class="contain ...
- Input
Input Basic Input Old Input Files Please note that both Input and Request do NOT sanitize your data, ...
- linux系统安装(虚拟机以及linux的下载与安装)
最近开始研究linux系统,以前接触linux系统只是一些简单的命令,例如: pwd:查看当前目录 ls:遍历目录 cd :在目录之间切换等. linux系统是基于unix系统开发的,是一个 ...
- 设置ISE/vivado中默认文本编辑器为gvim
ise windows版,添加方式 ISE下点击菜单Edit -> Preferences -> Editor. 在Editor选项框里选择Custom,在Command line syn ...
- webstorm添加vue模板支持
字谕纪泽: 八月一日,刘曾撰来营,接尔第二号信并薛晓帆信,得悉家中四宅平定,至以为尉. 汝读”四书”无甚心得,由不能虚心涵泳,切己体察.朱子教人读书之法,此二语最为精当.尔现读”离娄”,即如“离娄”首 ...
- 可发布指定的ASP.NET页面的插件：LimusicAddin
涉及到的技术点 VS插件开发.推荐阅读:Visual Studio 2008 可扩展性开发 asp.net 预编译.使用aspnet_comlier.exe(在目录:C:\Windows\Micros ...
- linux中的常用命令
cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...
- 20个linux命令行工具监视性能(上)
对于每一个系统管理员或网络管理员每天监视或调试linux系统的性能问题是一件非常困难的事,在it行业作为一个linux管理员五年之后,我开始知道监视和保持系统启动和运行有多么的困难.由于这个原因,我们 ...
- MySQL备份方案
下面将分别模拟不同场景数据库宕机解决方案:这里应用到的技术分别为innobackuper及binlog日志来进入还原数据 一.主从库情况下(为了不影响主库的性能,备份都放在从库上进行)当主库宕机时,如 ...