点击按钮文字变成input框,点击保存变成文字的实现-html教程-PHP中文网

首页

web前端

html教程

点击按钮文字变成input框,点击保存变成文字的实现

不言

Jun 26, 2018 am 10:52 AM

按钮特点

下面为大家带来一篇点击按钮文字变成input框,点击保存变成文字的实现代码。内容挺不错的，现在分享给大家，也给大家做个参考。

点击按钮文字变成input框,点击保存变成文字的实现代码

<!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==&#39;修改&#39;){   
　　　　$(&#39;.edit&#39;).each(function(){   
　　　　　　var old=$(this).html();   
　　　　　　$(this).html("<input type=&#39;text&#39; name=&#39;editname&#39; class=&#39;text&#39; value="+old+" >");   
　　　　})   
　　　　$(obj).html(&#39;保存&#39;);   
　　}else if(xg==&#39;保存&#39;){   
　　　　$(&#39;input[name=editname]&#39;).each(function(){   
　　　　　　var old=$(this).html();   
　　　　　　var newfont=$(this).parent(&#39;td&#39;).parent(&#39;tr&#39;).children().find(&#39;input&#39;).val();   
　　　　　　$(this).parent(&#39;td&#39;).html(newfont);   
　　　　})   
　　　　$(obj).html(&#39;修改&#39;);   
　　}   
}   
</script>
</body>
</html>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7700

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1230

显示更多

Related knowledge

如何修复 Microsoft Teams 白屏 Apr 17, 2023 pm 05:07 PM

重新启动Microsoft团队如果您在启动Teams后出现空白屏幕，则一个很好的起点是重新启动应用程序本身。要关闭并重新启动MicrosoftTeams，请执行以下操作：右键单击任务栏通知区域中的Teams图标，然后从菜单中单击退出。从“开始”菜单或桌面快捷方式重新启动MicrosoftTeams并查看它是否有效。从任务管理器关闭MicrosoftTeams如果Teams进程的基本重新启动不起作用，请进入任务管理器并结束任务。要从任务管理器关闭Teams，请执行以下操作

什么是 Windows 安全按钮？所有你必须知道的 Apr 13, 2023 pm 10:22 PM

Windows 安全按钮是什么？顾名思义，Windows 安全按钮是一项安全功能，可让您安全地访问登录菜单并使用密码登录您的设备。在这种情况下，智能手机绝对领先。但是 Windows 便携式设备（例如平板电脑）已经开始添加一个 Windows 安全按钮，它不仅仅是一种将不需要的用户拒之门外的方式。它还提供额外的登录菜单选项。尽管如果您试图在台式 PC 或笔记本电脑上找到 Windows 安全按钮，您可能会感到失望。这是为什么？平板电脑与个人电脑Windows 安全按钮是一个物理按钮，存在于平板

在 Windows 中禁用传递优化服务的 5 种方法 May 17, 2023 am 09:31 AM

许多原因可能使你想要禁用传递优化服务在你的Windows电脑上。但是，我们的读者抱怨不知道要遵循的正确步骤。本指南将通过几个步骤讨论禁用传递优化服务的方法。要了解有关服务的更多信息，您可能需要查看我们的如何打开services.msc指南以获取更多信息。传递优化服务有什么作用？传递优化服务是具有云托管解决方案的HTTP下载程序。它允许Windows设备从备用来源下载Windows更新、升级、应用程序和其他大型包文件。此外，它还通过允许部署中的多个设备下载这些包来帮助减少带宽消耗。此外，Windo

ppt怎么做圆形的图片和文字 Mar 26, 2024 am 10:23 AM

首先，在 PPT 中绘制一个圆圈，然后插入一个文本框，输入文字内容。最后，设置文本框的填充和轮廓为无，即可完成圆形图片和文字的制作。

如何重启、强制重启和关闭 iPad Mini 6 Apr 29, 2023 pm 12:19 PM

如何强制重启iPadMini6强制重启iPadMini6是通过一系列按钮按下来完成的，它的工作原理如下：按下并释放音量调高按下并释放降低音量按住电源/锁定按钮，直到您在屏幕上看到Apple标志，表明iPadMini已强制重启仅此而已，您已经强制重启了iPadMini6！强制重启通常用于故障排除原因，例如iPadMini被冻结、应用程序被冻结或发生其他一些一般性不当行为。关于强制重启第6代iPadMini的程序需要注意的一点是，对于所有其他具有超薄边框并使用

重写后：如何解决 PS5 控制器在 Windows 11 上未被识别的问题 May 09, 2023 pm 10:16 PM

关于连接我的PS5控制器，我应该知道什么？与DualSense控制器一样好，有报告称控制器未连接或未被检测到。解决此问题的最简单方法是使用适当的USB电缆将控制器连接到您的PC。有些游戏本身就支持DualSense。在这些情况下，您只需插入控制器即可。但这引发了其他问题，例如如果您没有USB电缆或不想使用USB电缆怎么办

word中怎么给文字加点？ Mar 19, 2024 pm 08:04 PM

我们在日常制作Word文档时,有时需要给文档中的某些文字下方加点,尤其是出试题的时候。来用于重点突出这部分内容,小编给大家分享下word中怎么给文字加点的技巧，希望能帮助到您。1.打开一个空白word文档。　　2.举个例子比如给“如何给文字加点”几个字的下面加上点。　　3.我们先把“如何给文字加点”几个字用鼠标左键选择了，注意以后你想给那个字加点就先用鼠标的左键选择哪个字。今天我们给这几个字都加点，所以几个字都选择了。选中这几个字后右击，在弹出来的功能框中点击字体。　　4.然后就会出现一个这样的