効果ドキュメント最初のステップ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チャネルを使用してデータを収集します
この記事では、参考までに、Navicat for MySql の CSV ファイルのビジュアルインポ...
目次序文基本的な使い方文法エラー処理プロミスチェーン呼び出し非同期と待機よく使われる方法1. Pro...
序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...
この記事では、VUEの具体的なコードを共有して、下部吸引ボタンを実装する例を紹介します。具体的な内容...
CentOS 7 では、次のようなコマンドを使用してホスト ポートをコンテナー ポートにマッピングす...
移動を実現するためにtranslateパラメータを使用しますtranslateX: X 軸に沿って移...
docker-compose-monitor.yml バージョン: '2' ネットワ...
問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...
この記事では、Ubuntuサーバーバージョンのインストールグラフィックチュートリアルを参考までに紹介...
使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...
インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...
この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...
例えば、入力ボックスがあります <el-入力 ref="mySearch"...
MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法ウェブサイト開発...
オーバーレイネットワーク分析組み込みのホスト間ネットワーク通信は、常に Docker の待望の機能で...