點選按鈕文字變成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信箱登陸入口在哪裡

7824

Java教學

1647

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

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

<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.然後就會出現一個這樣的