<!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>

转载请带上原作者，谢谢合作！！！

点击按钮文字变成input框，点击保存变成文字的更多相关文章

  1. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  2. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  3. div悬浮在屏幕的中间及点击按钮关闭弹出框

    #fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...

  4. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  5. 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  6. 清除input框对浏览器保存的用户名和密码自动填充问题

    清除input框对浏览器保存的用户名和密码自动填充问题: type类型写如下写法,聚焦的时候type类型为“password” <input ng-model="getpwd" ...

  7. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  8. Net实现钩子函数(Hook)以及通过SendMessage实现自动点击按钮和给文本框赋值

    1.实现钩子函数 钩子(Hook)的实现需要三个主要的函数和一个委托 [DllImport("user32.dll", CharSet = CharSet.Auto, Callin ...

  9. angular input框点击别处 变成不可输入状态

    <input type="text" ng-model="edit" ng-disabled="!editable" focus-me ...

随机推荐

  1. 函数中的$input

    $input 在此属于一个特殊变量,一般在函数中用于接收输入 function FindWindowsFolder { $input | where-object {$_.Name -eq " ...

  2. Codeforces Round #324 (Div. 2) E. Anton and Ira 贪心

    E. Anton and Ira Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/probl ...

  3. Win8 安装Oracle 10g 提示“程序异常终止”的解决方案

    这段时间在做DRP,需要安装Oracle 10g的数据库,我的系统是win8企业版,安装Oracle 10g的时候,选择“高级安装”,提示“程序异常终止”,下面是几个解决方案,跟大家分享一下. 错误提 ...

  4. android.annotation cannot be resolved

    http://stackoverflow.com/questions/14870596/android-annotation-cannot-be-resolved As Artem suggested ...

  5. [HTML5] Input accepts only 6 number characters

    Use 'pattern' tag in html5: <input type="text" pattern="[0-9]{6}" maxlength=& ...

  6. （转） 如何在JavaScript与ActiveX之间传递数据1

    本文研究如何在JS等脚本语言与ActiveX控件之间通信,如何传递各种类型的参数,以及COM的IDispatch接口.使用类似的方法,可以推广到其他所有脚本型语言,如LUA,AutoCad等.本文将研 ...

  7. 第一章 01 namespace 命名空间

    一.什么是namespace? namesapce是为了防止名字冲突提供的一种控制方式. 当一个程序需要用到很多的库文件的时候,名字冲突有时无法避免.之前的解决思路是使用更长的变量名字,使用不方便. ...

  8. CentOS7安装RabbitMQ集群

    实验环境 RabbitMQ 集群 server1.example.com    IP: 10.10.10.11    Node: diskserver2.example.com    IP: 10.1 ...

  9. 关于git的基本命令

    git环境的搭建这里就先不说.本篇主要是普通开发工作者在开发过程中所使用的命令. 作为开发者,别人搭建git服务器之后,你呢就配置个人的客户端: 设置Git的配置变量,这个是一次性的工作.即这些设置会 ...

  10. Airbnb创始人：屌丝的逆袭之路

    这位黑发小帅哥名叫Brian Chesky,是Airbnb的联合创始人. 如果在百度一下Airbnb,你就会看到如下事实:Airbnb,即Air Bed and Breakfast,中国名“空中食宿” ...