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

    <?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns ...

  3. 【转】bt协议的详细分析

    转自:https://baoz.net/bt-protocol/ 一 BT系统的组成结构 1 普通的Web服务器:        例如Apache或IIS服务器 2 一个静态的种子文件:     即. ...

  4. sql server R2 下载地址收藏

    SQL Server 2008 R2 下载地址 32位: http://care.dlservice.microsoft.com/dl/download/1/e/6/1e626796-588a-495 ...

  5. ajax检查用户名

    Ajax实现的效果 究竟Ajax能实现什么功能呢?今天下午学习了一下Ajax,现在跟大家分享一下我的学习心得.Ajax是什么?工作机制又是什么?可能不大准确,只是我个人看了视频学习后的一点点看法. A ...

  6. 将字符串写进txt中方式

    try { File file = new File(filePath); PrintStream ps = new PrintStream(new FileOutputStream(file)); ...

  7. Spring在Web项目中的三种启动加载的配置

    在最近的项目中,使用到了spring相关的很多东西,有点把spring的配置给搞混了,从网上查到的资料以及整理了一下. 在Web项目中,启动spring容器的方式有三种,ContextLoaderLi ...

  8. Activity的启动模式及回退栈的概念

    Activity的启动模式 standard 正常模式 在创建一个新的activity的时候,直接在栈顶创建一个新的activity singleTop 顶部单个 在创建一个新的activity的时候 ...

  9. iOS语言国际化

    参考网站:http://blog.sina.com.cn/s/blog_7b9d64af0101jncz.html   语言国际化:根据系统不同的语言自动切换 Xcode6.2   一.在不同语言下工 ...

  10. 用expect做自动应答脚本

    Expect是一个用来实现自动交互功能的软件套件 (Expect [is a] software suite for automating interactive tools).使用它系统管理员可以创 ...