効果ドキュメント最初のステップtableFactory からアイコン フォーム オブジェクトを取得します。 または: ステップ2パラメータをロードし、JSONオブジェクトを渡す テーブル効果: jsonパラメータの詳細: 例: 以下に対応します: ステップ3ページ内の対応する ID を持つ div にテーブルを読み込みます。 のように: TDの幅は列数に応じて動的に調整できます。 別のファイルに入れて直接呼び出します。 ソースコード//テーブルファクトリー var tableFactory = function(type){ if (このインスタンスのtableFactory) { 新しい this[type]() を返します。 }それ以外{ return new tableFactory(type); //newが書き込まれない状況を防ぐ } } テーブルファクトリー.プロトタイプ = { チャートフォーム: 関数(){ var html = ''; //プライベートプロパティ this.loadParams = function(opts){ var jsonArr = []; //JSON配列 var icount = 0; //行の色を制御するために使用 var rowHeaderArr = []; //各行の最初の列の配列をフォーマットします if (opts.jsonArr) { jsonArr = opts.jsonArr; } (opts.rowHeaderArr)の場合{ 行ヘッダー配列 = opts.rowHeader配列; } var colNum = jsonArr.length; // 列の合計数を記録 var rowNum = rowHeaderArr.length - 1; // 行の合計数(最初の行を除く) html = "<TABLE id='table' style=\"border-collapse:collapse;border-spacing:0;border:1px solid #ccc;font-size:12px;text-align:center;\" >"+ "<TBODY><TR> "+ "<TD > </TD>"; //左上隅の空のTD //最初の行を綴る for(var i = 0;i < colNum;i++){ var c1 = jsonArr[i].c1; html += '<TD style="border:1px solid #ccc;height:14px;background-color:#e2fdfe;font-size:14px;font-weight:bold;padding:3px;" >' + c1 + '</TD>'; } html += '</TR><TR>'; for(var i = 0;i < rowNum + 1;i++){ //行ヘッダーのスペル var colorBox = rowHeaderArr[i].split(',')[0]; var hearerText = rowHeaderArr[i].split(',')[1]; html += "<TD class='colorBox' style='padding:3px;height:14px;border:1px solid #ccc;width:66px;text-align:center;'><div style='border-radius:2px 2px 2px 2px;display:inline-block;width:12px;height:12px;background-color:"+colorBox+";float:left;'></div>"+hearderText+"</TD>"; //この行の右側にあるすべての列をスペルアウトします for(var j = 0;j < colNum;j++){ //アラート(i); var colValue = jsonArr[j]['c'+(i+2)]; var tdWidth; colNum <= tableFactory.TD_WIDTHS.length の場合 tdWidth = tableFactory.TD_WIDTHS[colNum-1]; それ以外 tdWidth = tableFactory.TD_WIDTHS[tableFactory.TD_WIDTHS.length - 1]; コンソール.info(tdWidth); if(i%2 == 0){ html += '<TD style = "height:14px;border:1px solid #ccc;width:'+ tdWidth +'px;text-align:center;background-color:#e2fdfe;">'+colValue+'</TD>'; }それ以外{ html += '<TD style = "height:14px;border:1px solid #ccc;width:'+ tdWidth +'px;text-align:center;background-color:#fff;">'+colValue+'</TD>'; } } //改行 html += '</tr><tr>'; } html += '</TR><TR>'; html += '</TR>'; html += '</TBODY></TABLE>'; } ; this.loadData = function(houseId,callback){ document.getElementById(houseId).innerHTML = html; //表を表示 if(コールバック) コールバック(); } } } テーブルファクトリー.TD_WIDTHS = [220,190,150,120,90,60,10]; デモ: <script src='common.js'></script> <div id='TB' クラス='TB'></div> <div id='TB1' クラス='TB'></div> <div id='TB2' クラス='TB'></div> <div id='TB3' クラス='TB'></div> <div id='TB4' クラス='TB'></div> <スタイル> .TB { パディング:6px; } </スタイル> <スクリプト> var chartForm = tableFactory('chartForm'); チャートフォーム.loadParams({ jsonArr: [ {c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6}, {c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6}, {c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6}, {c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'北東',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'四川省',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'重庆',c2:2,c3:6,c4:3,c5:1,c6:6} ]、 行ヘッダー配列: [ '#000CCC,タスク総数', //行名 '#990033,プロジェクト設立段階', '#66FF00、検査フェーズ'、 '#663399、トライアル段階'、 「#33CCFF、報告段階」 ] }); chartForm.loadData('TB'); チャートフォーム.loadParams({ jsonArr:[ {c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6}, {c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6}, {c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6}, {c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'北東部',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'四川',c2:2,c3:6,c4:3,c5:1,c6:6}, ]、 行ヘッダー配列: [ '#000CCC,タスク総数', //行名 '#990033,プロジェクト設立段階', '#66FF00、検査フェーズ'、 '#663399、トライアル段階'、 「#33CCFF、報告段階」 ] }); chartForm.loadData('TB1'); チャートフォーム.loadParams({ jsonArr: [ {c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6}, {c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6}, {c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6}, {c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'北東',c2:2,c3:6,c4:3,c5:1,c6:6}, ]、 行ヘッダー配列: [ '#000CCC,タスク総数', //行名 '#990033,プロジェクト設立段階', '#66FF00、検査フェーズ'、 '#663399、トライアル段階'、 「#33CCFF、報告段階」 ] }); chartForm.loadData('TB2'); </スクリプト> 上記は、Java プログラミングで超実用的な JavaScript テーブル プラグインを作成する詳細です。Java プログラミング JavaScript テーブル プラグインの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: HTML チュートリアル: よく使われる HTML タグのコレクション (4)
>>: 分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します
目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...
私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....
シナリオシミュレーション:ある会社の運用保守担当者は、以前購入した一連のネットワーク機器の光ポートの...
テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...
1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...
私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...
1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...
この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...
序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...
導入データベースを使用したことがある人なら、機能面での like 記号と = 記号の類似点と相違点を...
MySql の null に関する関数IFNULL ISNULL NULLIF IFNULL使用法:...
最近、MySQL を使っています。Linux での mysql-installation という記事...
1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...
昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...