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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
js计算精度问题小结
Apr 22 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
flask框架视图函数用法示例
2018/07/19 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
工作表扬信的范文
2014/01/10 职场文书
会议主持词
2014/03/17 职场文书
公司聘任书模板
2014/03/29 职场文书
医学生求职自荐书
2014/06/12 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Python自动化测试PO模型封装过程详解
2021/06/22 Python
总结几个非常实用的Python库
2021/06/26 Python
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers