点击按钮文字变成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 ...
随机推荐
- 【32】确定你的public继承塑模出Is-A关系
1.public继承表示Is-A关系,也就是满足里氏代换.与之相对应的,private继承表示根据某物实现出,不满足里氏代换.子类对象初始化父类引用,编译通不过. 2.考虑下面的需求,企鹅继承鸟,Bi ...
- "无法启动程序，因为计算机中丢失*.dll” 运行exe错误解决方法
笔者把编译生成的win32 Release exe文件复制到另外一台电脑上,却发现程序不能运行,报错如下: 报错提示缺失动态链接库pcl_common_release.dll,那为什么在编译生成的电脑 ...
- 关于js的replace替换
关于js的replace替换 msgContent = msgContent.replace("a","b"); 这样的替换只会把第一个a替换成b,不会替换全部 ...
- [AngularJS] Introduction to angular-formly
<!DOCTYPE html> <html> <head> <!-- Each of these scripts are the latest version ...
- 设计模式-工厂方法（Demo）
工厂方法 工厂方法跟简单工厂一样.都是创建型的设计模式.他攻克了简单工厂的违背开放封闭的缺点. 故事 主人--人家做饭好累的.女仆抱着我大腿说着.自从上次把她买进家.没做了几次饭就喊累--看着她那出处 ...
- php一些技术要点连接地址
http基本认证: http://www.php.net/manual/zh/features.http-auth.php
- Basic Example of JMX Technology--转载
原文地址:http://nick-lab.gs.washington.edu/java/jdk1.5b/guide/jmx/tutorial/connectors.html Basic Example ...
- iOS 8创建交互式通知
iOS 8提供了一个令人兴奋的新API来创建交互式通知(interactive notifications),它能让你在你的应用之外为用户提供额外的功能.我发现网上还没有关于如何实现它的比较好的示例教 ...
- Google, FaceBook, Amazon 加州求职记 (转)
http://blog.csdn.net/ithomer/article/details/8774006 http://www.myvisajobs.com 一年多前,出于显而易见的原因,下定决心肉身 ...
- hadoop学习记录（零）
这个博客开通快一年了,但是由于种种原因,始终没有能够养成定期更新的习惯. 最近完成了比赛的项目,向除了android开发以外再拓宽一下自己的技能树. 最近购买了<java8函数式编程>和& ...