ボタンをクリックするとテキストが入力ボックスに変わり、保存をクリックするとテキストがテキストに変わる効果を実現する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ボタンをクリックするとテキストが入力ボックスに変わり、保存をクリックするとテキストがテキストに変わる効果を実現する方法

php中世界最好的语言

Jan 23, 2018 am 10:47 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メールのログイン入り口はどこですか？

7744

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1291

PHP チュートリアル

1234

Related knowledge

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. するとこのようなものが表示されます

iPhone iOS 17で複数のタイマーを設定する方法 Sep 18, 2023 am 09:01 AM

iOS 17 では、時計アプリを使用して iPhone に複数のタイマーを設定したり、Siri を使用してハンズフリーで設定したりできます。この記事では両方について説明します。それらを見てみましょう。時計アプリを使用して iPhone で複数のタイマーを設定する iPhone で時計アプリを開き、右下隅の [タイマー] タブをタップします。次に、時、分、秒を設定します。「ラベル」および「タイマー終了時」オプションを使用して、タイマーの名前とタイマー完了時の好みのトーンを設定できます。これはタイマーを区別するのに役立ちます。完了したら、「開始」ボタンをクリックします。次に、右上隅にある「+」アイコンをクリックします。次に、上記の手順を繰り返して、iPhone に複数のタイマーを設定します。閲覧することもできます

Microsoft Edgeブラウザのダウンロード履歴をクリアするにはどうすればよいですか? Apr 21, 2023 am 09:34 AM

<ul><li><strong>クリックして入力:</strong>ChatGPT ツールプラグインナビゲーション</li></ul><h2>Edge でのダウンロード履歴の検索と削除< /h2&gt ;<p>他のブラウザと同様、Edge には<strong>ダウンロード機能があります。

Windows 11 の電源ボタンの動作を変更する [5 つのヒント] Sep 29, 2023 pm 11:29 PM

電源ボタンは PC をシャットダウンするだけではありませんが、これはデスクトップユーザーのデフォルトのアクションです。 Windows 11 で電源ボタンの動作を変更したい場合、それは思っているよりも簡単です。物理的な電源ボタンはスタートメニューのボタンとは異なるため、以下の変更はスタートメニューの操作には影響しないことに注意してください。さらに、デスクトップかラップトップかに応じて、電源オプションが若干異なります。 Windows 11 で電源ボタンの動作を変更する必要があるのはなぜですか?コンピュータをシャットダウンするよりもスリープ状態にすることが多い場合は、ハードウェア電源ボタン (つまり、PC の物理的な電源ボタン) の動作を変更すると効果があります。同じ考え方がスリープモードや単にディスプレイをオフにする場合にも当てはまります。 Windows 11 を変更する

See all articles

ボタンをクリックするとテキストが入力ボックスに変わり、保存をクリックするとテキストがテキストに変わる効果を実現する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック