jQuery实现点击按钮文字变成input框点击保存变成文字


Posted in Javascript onMay 09, 2016

废话不多说,直接给大家贴代码了。

具体代码如下所示:

<!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>
Javascript 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JS立即执行的匿名函数用法分析
Nov 04 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 #Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
ajax跨域调用webservice的实现代码
May 09 #Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 #Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 #Javascript
jQuery实现三级菜单的代码
May 09 #Javascript
You might like
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
新浪的图片新闻效果
2007/01/13 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue.js实现简单的计算器功能
2020/02/22 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python图像灰度变换及图像数组操作
2016/01/27 Python
python Flask实现restful api service
2017/12/04 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
pytorch 共享参数的示例
2019/08/17 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
英文自我鉴定
2013/12/10 职场文书
电钳专业个人求职信
2014/01/04 职场文书
2014年营业员工作总结
2014/11/18 职场文书
社会实践活动总结
2015/02/05 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python