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

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

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

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

推薦する

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

JavaScriptはスタック構造の詳細なプロセスを実装する

目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...

MySQLで適切なインデックスを選択する方法

まずは栗を見てみましょう EXPLAIN select * from employees where...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

Vueスロットの詳細な説明

1. 機能: 親コンポーネントが子コンポーネントの指定された位置に HTML 構造を挿入できるように...

js配列の基本的な使い方のまとめ

序文配列は特別な種類のオブジェクトです。 js には実際の配列はなく、オブジェクトを使用して配列をシ...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

Docker に共通コンポーネント (mysql、redis) をインストールする方法

Dockerはmysqlをインストールします docker search mysql 検索 dock...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

JavaScript フォーム検証の例

HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...

Nodejs モジュール システムのソースコード分析

目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

SQL 挿入文の書き方の説明

方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...

CSSでイメージマッピングを実装する方法

1. はじめにイメージマップを使用すると、画像の領域をホットスポットとして指定できます。この領域にマ...