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

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

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

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

推薦する

docker-compose で Jenkins をインストールする際の実践的なメモ

ディレクトリを作成する cd /usr/local/docker/ jenkins-docker を...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...

Reactのヒントはフックの依存関係の問題を解消する方法を教えます

reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...

Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要

Docker ダウンロード アドレス: http://get.daocloud.io/#instal...

MySQL テーブルスペースとは何ですか?

今日皆さんにお伝えしたいトピックは、「皆さんがよく話題にするテーブル スペースとは一体何でしょうか。...

startup.bat をダブルクリックすると Tomcat がクラッシュする問題の解決方法の詳細な説明

Tomcat を学習したばかりのプログラマーにとって、これはよくある間違いです。 1. 環境変数の問...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...

WeChatアプレットがフォーム検証を実装

WeChatアプレットフォームの検証、参考までに具体的な内容は次のとおりです。プラグインWxVali...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...

ARMアーキテクチャにおける関数呼び出しプロセスの簡単な分析

目次1. 背景知識1. ARM64レジスタの紹介2. STP命令の詳しい説明（ARMV8マニュアル）...

HTML の div と span の比較_PowerNode Java Academy

1. <div></div> と <span></spa...

mysqlのデータディレクトリ内のファイルを直接コピーしてデータを復元する実装

mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...