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

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

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

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

推薦する

ページのキャッシュを防ぐソリューション

解決： <head> に次のコードを追加します。コードをコピーコードは次のとおりです。 ...

Alibaba Cloud SSHリモート接続がしばらくすると切断される問題を解決

問題の再現Alibaba Cloud Server は、Finalshell リモート接続を使用して...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

MySQLの指定されたテーブルからデータをエクスポートする例の詳細な説明

指定されたテーブルからデータをエクスポートするMySQLの詳細な説明必要とする： 1. テーブルはす...

JavaScript カウントダウン プロンプト ボックス

この記事の例では、カウントダウンプロンプトボックスを実装するためのJavaScriptの具体的なコー...

Apple の携帯電話のロックを解除するときに光沢のあるフォント効果を実現するために CSS3 を使用する例

0. はじめに2016 年 8 月 18 日 今日、iPhone をスライドさせてロックを解除すると...

MySQL インデックスのクイックガイド

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

太字の <b> と <strong> の違いの分析

私たちウェブマスターは皆、ウェブサイトを最適化する際に記事内のキーワードを太字にすることが最適化に非...

Windows で Nginx を使用して https サーバーとリバース プロキシを構成する際の問題

リクエストロジックフロントエンド --> https経由でnginxをリクエストnginx -...

MYSQLは継続サインイン機能を実装しており、サインイン後1日経過すると最初から開始します（SQL文）

1. テストテーブルを作成する テーブル `testsign` を作成します ( `userid`...

MySQL の主キーとトランザクションの詳細な説明

目次1. MySQLの主キーとテーブルフィールドに関するコメント1. 主キーと自動増分2. テーブル...

Vueは水平の斜めの棒グラフを実装します

この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...

ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させ...

テーブルを Excel にエクスポートする純粋な JS メソッド

html <div> 要素 <button type="button&q...

JavaScript配列の重複排除のいくつかの方法についての詳細な説明

目次1.重複排除を設定する2. 重複を削除するには、2 回の for ループを使用します。 3. i...