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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
防止文件缓存的js代码
Jan 10 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 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
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
超级强大的表单验证
2006/06/26 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JSON生成Form表单的方法示例
2018/11/21 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
python实现定时播放mp3
2015/03/29 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
wxPython实现整点报时
2019/11/18 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
python实现按日期归档文件
2021/01/30 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
init进程的作用
2012/04/12 面试题
环境建设实施方案
2014/03/14 职场文书
数学教研活动总结
2014/07/02 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL