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

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

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

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 計算関数の詳細

推薦する

CSSはスクロールを許可しながらスクロールバーを非表示にするためにオーバーフローを設定します

CSS は、スクロールを許可しながらスクロール バーを非表示にするために Overflow を設定し...

ページの下部にHTMLフッターを配置する簡単な方法

要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...

Linux でファイルの権限 (所有権) を変更する

Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する

1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...

JavaScriptの知識ポイントの詳しい説明

目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...

xshellを使用してLinuxサーバーに接続する

xshellを使用してLinuxに接続する利点Windows環境でLinuxを直接操作できるインター...

Mysql 5.6ではユーザー名とパスワードを変更するメソッドが追加されました

まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...

vue3で注意すべき2つのポイントを詳しく解説:セットアップ

目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

Vueコンポーネントの動的コンポーネントの詳細な説明

目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...

vue+element で動的スキニングを実装するためのサンプルコード

プロジェクトのテーマがすべての人の美的感覚を満足できないこともあります。このとき、スキン変更機能は非...

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...