JSONデータはHTMLページ上に表示されフォーマットされます 1. 表示効果図 説明:
2. ソースコードの表示 <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8"> <スタイル> pre {アウトライン: 1px 実線 #ccc; パディング: 5px; マージン: 5px; } .string { 色: 緑; } .number { 色: ダークオレンジ; } .boolean { 色: 青; } .null { 色: マゼンタ; } .key { 色: 赤; } .showinfo{ 位置: 絶対; 背景色: #eef1f8; 幅: 200ピクセル; パディング: 5px; 境界線の半径: 4px; 境界線: 1px 実線 #ccc; 表示: なし; } .showinfo pre{ パディング: 5px; 境界線: 1px 実線 #ccc; マージン:0; } テーブル、th、td{ border:1px 青一色; } </スタイル> <script src="./js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(ドキュメント).ready(関数(){ $(".show-rough").mouseover(function(){ var left = $(this).offset().left + $(this).width() +20; //div の表示位置を計算します var top = $(this).offset().top + 20; var _jsonDate = $.parseJSON($(this).text()); var showJson = syntaxHighlight(_jsonDate); $("#show-info").css({"left":left,"top":top}).show(); $("#show-pre").html(showJson); }); $(".show-rough").mouseout(function(){ $("#show-info").hide().html(); $("#show-pre").html(); }) }); //jsonデータを処理し、正規表現を使用して異なるタイプのパラメータをフィルタリングします。function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, 未定義, 2); } json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g を返します。function(match) { var cls = '数値'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'キー'; } それ以外 { cls = '文字列'; } } そうでない場合 (/true|false/.test(match)) { cls = 'ブール値'; } そうでなければ (/null/.test(match)) { cls = 'null'; } '<span class="' + cls + '">' + match + '</span>' を返します。 }); }; </スクリプト> </head> <本文> <テーブル> <頭> <tr> <th>名前</th> <th>JSON データ</th> </tr> </thead> <t本文> <tr> <td>小三</td> <td class="show-rough">{ "name": "小三", "address":"北京路23号","age":16, "email": "[email protected]","Object":[{"Position":"Manager"}],"del":[] }</td> </tr> <tr> <td>小四</td> <td class="show-rough">{ "name": "シャオ・シ", "address":"No. 01 Shanghai Road","age":27, "email": "[email protected]","Object":[],"del":[] }</td> </tr> </tbody> </テーブル> <div id="show-info" class="showinfo"> <pre id="show-pre"> </pre> </div> </本文> </html> 3. ソースコードのアップロード ソースコードのダウンロードアドレス JSON データを表示して HTML ページでフォーマットする方法に関するこの記事はこれで終わりです。JSON データを表示して HTML ページでフォーマットする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: Dockerコンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します(設計アイデア)
この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...
1. サーブレットとは何か1.1. 正式な言葉で説明する:サーブレットは、動的な Web リソースを...
MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...
この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...
1. Dockerfileを書く(1)プロジェクト名を右クリックして新しいテキストファイルを作成し、...
今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...
HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...
大学院入試に備えて、C/C++ を使って基本的なデータ構造とアルゴリズムを実装する予定です。アルゴリ...
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...
1. 問題の紹介ユーザー テーブルに 3 つのフィールドが含まれているシナリオを想定します。 id、...
1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...
MySQL-8.0.23 をダウンロードクリックしてダウンロード: mysql-8.0.23-li...
HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
基礎トランザクションは、SQL ステートメントのグループに対するアトミック操作です。つまり、グループ...