How to achieve the effect of clicking the button text to become an input box, and clicking save to turn it into text.-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to achieve the effect of clicking the button text to become an input box, and clicking save to turn it into text.

php中世界最好的语言

Jan 23, 2018 am 10:47 AM

buttonletterClick

This time I will show you how to realize the effect of turning the text of a click button into an input box, and click save to turn it into text. What are the precautions for realizing the effect of turning the text of a click button into an input box, and clicking save to turn it into text? , the following is a practical case, let’s take a look.

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to deal with content overflow in the table table

htmlImportant knowledge points you must know about PHP

The above is the detailed content of How to achieve the effect of clicking the button text to become an input box, and clicking save to turn it into text.. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

如何修复 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 安全按钮是一个物理按钮，存在于平板

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

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

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

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

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

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

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

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

如何清空 Microsoft Edge 浏览器的下载记录？Apr 21, 2023 am 09:34 AM

<ul><li><strong>点击进入：</strong>ChatGPT工具插件导航大全</li></ul><h2>在Edge中查找和删除下载历史记录</h2><p>与其他浏览器一样，Edge有一个<strong>下载

如何使用 Microsoft Word 进行音频转录Apr 21, 2023 pm 03:31 PM

如何在MicrosoftWord中转录音频要转录音频文件，您需要让Word联机。如果您尝试免费版本，它会提示您注册高级帐户。要开始使用，请使用以下步骤：如果您尚未登录，请前往WordOnline并登录。打开一个新的或现有的文档或创建一个新文档。您可以通过打开主页选项卡、单击听写按钮旁边的下拉箭头并单击转录来开始MicrosoftWord转录。将出现一条转录的消息。您可以上传现有录音以开始转录或开始新录音。首先，我们来看看创建一个新的录音。单击开始录制按钮。如果这是您第一次录制消息，则需要

See all articles