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 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue实现列表滚动的过渡动画
Jun 29 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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
社区服务活动感想
2015/08/11 职场文书
如何在Python中创建二叉树
2021/03/30 Python
为什么不建议在go项目中使用init()
2021/04/12 Golang
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python