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数组插入一条记录的代码
Aug 30 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
jQuery.each使用详解
Jul 07 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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开发者的10个技巧
2011/02/25 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
详解vuex的简单使用
2018/03/12 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Django中url的反向查询的方法
2018/03/14 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
迪奥官网:Dior.com
2018/12/04 全球购物
花店创业计划书范文
2014/02/07 职场文书
工作说明书范文
2014/05/07 职场文书
城南旧事观后感
2015/06/11 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL