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

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4. 　　<メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   />   
  5. 　　<メタ 文字セット= "utf-8" >   
  6. 　　< title >ボタンをクリックするとテキストが入力ボックスになり、保存をクリックするとテキストになります</ title >   
  7. 　　<スタイル タイプ= "text/css" >   
  8. 表{ テキスト配置: 中央; フォントサイズ: 14px;}
  9. テーブル> thead > tr > th{ フォントの太さ: normal;}
  10. .text-right{ パディング右:73px; テキスト配置: 右;}
  11. .text{ 幅: 50px; 高さ: 30px; 境界線: 1px 実線 #ddd; テキスト配置: 中央;}
  12. 　　</スタイル>   
  13. 　　<スクリプト タイプ= "テキスト/javascript"   src = "js/jquery.min.js" > </スクリプト>   
  14. </ヘッド>   
  15.   
  16. <本文>   
  17. 　　<表>   
  18. 　　　　<スレッド>   
  19. 　　　　　　< tr >   
  20. 　　　　　　　　<番目  width = "400" >製品名</ th >   
  21. 　　　　　　　　<番目  width = "200" >アイテム数</ th >   
  22. 　　　　　　</tr>​​   
  23. 　　　　</スレッド>   
  24. 　　　　< tボディ>   
  25. 　　　　　　< tr  高さ= "50" >   
  26. 　　　　　　　　< td > iPhone 6s </ td >   
  27. 　　　　　　　　< td  クラス= "編集" > 2 </ td >   
  28. 　　　　　　</tr>​​   
  29. 　　　　　　< tr  高さ= "50" >   
  30. 　　　　　　　　< td >小米科技 5 </ td >   
  31. 　　　　　　　　< td  クラス= "編集" > 5 </ td >   
  32. 　　　　　　</tr>​​   
  33. 　　　　</ tbody >   
  34. 　　　　< tfoot >   
  35. 　　　　　　< tr >   
  36. 　　　　　　　　< td  列範囲= "2"  クラス= "テキスト右" >   
  37. 　　　　　　　　　　<ボタン タイプ= "ボタン"  クラス= "btn"   onclick = " change (this)" >変更</button>   
  38. 　　　　　　　　</ td >   
  39. 　　　　　　</tr>​​   
  40. 　　　　</ tfoot >   
  41. 　　</表>   
  42.   
  43. <スクリプト タイプ= "text/javascript" >   
  44. 関数change(obj){
  45. var xg =$(obj).html();
  46. if( xg == '変更'){
  47. $('.edit').each(function(){
  48. var old =$(this).html();
  49. $(this).html(" <入力 タイプ= 'テキスト'  名前= 'editname'  クラス= 'テキスト'  値= "+古い+"   > ");
  50. })
  51. $(obj).html('保存');
  52. }そうでない場合( xg == '保存'){
  53. $('input[ name = editname ]').each(function(){
  54. var old =$(this).html();
  55. var newfont =$(this).parent('td').parent('tr').children().find('input').val();
  56. $(this).parent('td').html(新しいフォント);
  57. })
  58. $(obj).html('変更');
  59. }
  60. }
  61. </スクリプト>   
  62.   
  63.   
  64.   
  65. </本文>   
  66. </html>​​   

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキストに変換する上記の実装コードは、エディターがあなたと共有するすべてのコンテンツです。これが参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/yuxiaoqi912/p/5470354.html

<<:  Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。

>>:  mysql 計算関数の詳細

推薦する

Vue で webSocket を使用してリアルタイムの天気を更新する方法

目次序文webSocket の操作と例について:ウェブソケット1. webSocketについて2. ...

nginx.conf のルートディレクトリ設定の詳細な説明

nginx.conf を構成するときには常に何らかの問題が発生します。ここでは、よくある問題とその解...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

vue2 vue3 での Echarts の詳細な使用方法

目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...

HTML テーブル マークアップ チュートリアル (37): 背景画像属性 BACKGROUND

テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...

プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...

MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析

以前、「MySQL でコミットされていないトランザクション情報を検索する方法」というタイトルのブログ...

Nginx Webサーバーのサンプルコードの設定方法の詳細な説明

概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...

Vue の 4 つのカスタム命令の説明と使用例

4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...

Javascript における分割代入構文の詳細な説明

序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...

Docker で ElasticSearch と Kibana をインストールするためのサンプル コード

1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...

VMware Workstation Pro が Windows で実行されない場合の解決策

国慶節の休暇後、Windows アップデート後に VMware 仮想マシンが開けなくなり、「VMwa...

デプロイから基本操作までDocker Swarm

Docker SwarmについてDocker Swarm は次の 2 つの部分で構成されます。 D...

MySQL 5.0.96 for Windows x86 32 ビット グリーン簡易版インストール チュートリアル

MySQL 5.0 は、いくつかの「高度な機能」があるため定番となっています。これは、Windows...

Dockerコンテナでアプリケーションサービスを自動的に起動する方法の例

コンテナの起動時に Docker コンテナ内のアプリケーション サービスを自動的に起動する場合。 D...