ボタンのテキストをクリックすると入力ボックスになり、保存をクリックするとテキストの実装になります-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ボタンのテキストをクリックすると入力ボックスになり、保存をクリックするとテキストの実装になります

不言

Jun 26, 2018 am 10:52 AM

ボタン文字

以下は、ボタンをクリックするとテキストを入力ボックスに変換し、保存をクリックするとテキストに変換する実装コードを示します。内容がとても良かったので、参考にさせていただきたいと思います。

ボタンのテキストをクリックして入力ボックスに変え、[保存]をクリックしてテキスト実装コードに変えます

<!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 に注目して、関連コンテンツをもっと探してください。中国語の Web サイトです。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7700

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1230

Related knowledge

Microsoft Teamsの白い画面を修正する方法 Apr 17, 2023 pm 05:07 PM

Microsoft Teams を再起動する Teams を起動した後に空白の画面が表示される場合は、まずアプリ自体を再起動することをお勧めします。 Microsoft Teams を閉じて再起動するには: タスクバーの通知領域にある Teams アイコンを右クリックし、メニューから [終了] をクリックします。 [スタート] メニューまたはデスクトップのショートカットから Microsoft Teams を再起動し、機能するかどうかを確認します。タスクマネージャーから Microsoft Teams を閉じる Teams プロセスの基本的な再起動が機能しない場合は、タスクマネージャーに移動してタスクを終了します。タスクマネージャーから Teams を閉じるには、次の手順を実行します。

Windows セキュリティボタンとは何ですか?知っておくべきことすべて Apr 13, 2023 pm 10:22 PM

Windows セキュリティボタンとは何ですか?名前が示すように、Windows セキュリティボタンは、ログインメニューに安全にアクセスし、パスワードを使用してデバイスにログインできるようにするセキュリティ機能です。この場合、スマートフォンの方が確実に進んでいます。しかし、タブレットなどの Windows ポータブルデバイスには、望ましくないユーザーを締め出すだけの手段ではない Windows セキュリティボタンが追加され始めています。また、追加のログインメニューオプションも提供します。ただし、デスクトップ PC またはラップトップで Windows セキュリティボタンを見つけようとすると、がっかりするかもしれません。何故ですか？タブレットと PC Windows セキュリティボタンはタブレットに存在する物理的なボタンです

Windows で配信最適化サービスを無効にする 5 つの方法 May 17, 2023 am 09:31 AM

Windows コンピューターで配信の最適化サービスを無効にする理由はさまざまです。しかし、読者からは、従うべき正しい手順がわからないという苦情が寄せられました。このガイドでは、配信の最適化サービスをいくつかの手順で無効にする方法について説明します。サービスの詳細については、「services.msc を開く方法」ガイドを参照してください。配信最適化サービスは何をするサービスですか?配信最適化サービスは、クラウドホスティングソリューションを備えた HTTP ダウンローダーです。これにより、Windows デバイスは Windows アップデート、アップグレード、アプリケーション、その他の大きなパッケージファイルを代替ソースからダウンロードできるようになります。さらに、展開内の複数のデバイスがこれらのパッケージをダウンロードできるようにすることで、帯域幅の消費を削減します。さらにウィンドさんは

pptで丸い写真とテキストを作成する方法 Mar 26, 2024 am 10:23 AM

まず、PPT で円を描き、テキストボックスを挿入してテキストの内容を入力します。最後に、テキストボックスの塗りつぶしと輪郭を「なし」に設定すれば、円形の絵と文字の制作が完了です。

iPad Mini 6を再起動、強制再起動、シャットダウンする方法 Apr 29, 2023 pm 12:19 PM

iPad Mini 6 を強制的に再起動する方法 iPad Mini 6 の強制再起動は、一連のボタンを押すことで行われ、次のように動作します。音量を上げるには押して放します。音量を下げるには押して放します。が表示されるまで電源/ロックボタンを押して放します。 iPad Mini が強制的に再起動されたことを示す Apple ロゴこれで、iPad Mini 6 が強制的に再起動されました。強制再起動は通常、iPad Mini のフリーズ、アプリのフリーズ、その他の一般的な誤動作などのトラブルシューティングの目的で使用されます。第 6 世代 iPad Mini を強制的に再起動する手順について注意すべき点は、超薄型ベゼルを備え、

書き換え後: Windows 11でPS5コントローラーが認識されない場合の対処方法 May 09, 2023 pm 10:16 PM

<h3>PS5 コントローラーの接続について知っておくべきことは何ですか? </h3><p>DualSense コントローラーは優れていますが、コントローラーが接続されない、または検出されないという報告があります。この問題を解決する最も簡単な方法は、適切な USB ケーブルを使用してコントローラーを PC に接続することです。 </p><p>一部のゲームは、DualSense をネイティブにサポートしています。このような場合は、コントローラーを接続するだけで済みます。しかし、これにより、USB ケーブルがない場合や使いたくない場合はどうすればよいかなど、別の疑問が生じます。

Wordでテキストにドットを追加するにはどうすればよいですか? Mar 19, 2024 pm 08:04 PM

日常的に Word 文書を作成するとき、特にテスト問題がある場合、文書内の特定の単語の下にドットを追加する必要があることがあります。コンテンツのこの部分を強調するために、エディターが Word でテキストにドットを追加する方法のヒントを共有します。 1. 空白の Word 文書を開きます。 2. たとえば、「テキストにドットを追加する方法」という単語の下にドットを追加します。 3. まず、マウスの左ボタンで「テキストにドットを追加する方法」という単語を選択します。将来その単語にドットを追加したい場合は、まずマウスの左ボタンを使用して単語を選択する必要があることに注意してください。。今日はこれらの単語に点を追加するので、いくつかの単語を選択しました。これらの単語を選択して右クリックし、ポップアップ機能ボックスで [フォント] をクリックします。 4. するとこのようなものが表示されます