Q&A前提・実現したいこと
JQUERYテーブルに4つのリストボックス(体調、水槽、開始、終了)があります。
画面更新時(html起動、F5で画面更新)4つのリストボックスの値を元にグラフを表示したいです。
現在、リストボックスを変更時はグラフ表示します。
【再現手順】
1.開始リストボックスの値を、01:00に変更する。
2.終了リストボックスの値を、03:00に変更する。
3.体調リストボックスの値を、良好に変更する。
【結果】
グラフを表示する。
再現手順3の後に、下記手順を実施しますと、見やすいと思います。
4.体調リストボックスの値を、元気に変更する
発生している問題
下記の関数を、$(document).ready(function() 内で呼出し出来れば実現出来ると思いましたが、期待通りにグラフを表示しませんでした。
fishTimeListChange(obj,flag)
fishgrandAbilLstChange(obj)
fishgrandMotLstChange(obj)
アドバイスがございましたらご教示よろしくお願いします。
javascript
1$(document).ready(function() { 2 $(document).on('load', function() { 3 fishTimeListChange($(this),flag); 4 fishgrandAbilLstChange($(this)); 5 fishgrandMotLstChange($(this)); 6 }); 7});
ソースコード
再現に必要なソースは下記です。
fish.html
./js/fishTable.js
./jquery-3.6.0.min.js
html
1<!DOCTYPE html> 2<head> 3 <meta charset="utf-8"/> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>水族館</title> 7 <script src="./js/jquery-3.6.0.min.js"></script> 8 <script src="./js/fishTable.js"></script> 9</head> 10<body> 11 <div class="row"> 12 <div class="panel"> 13 <div class="panel-body"> 14 <div class="form_bathtabArea"> 15 <div class="scroll_bathtabArea-table"> 16 <table id="bathtabArea-table"> 17 <thead> 18 <tr> 19 <th></th> 20 <th></th> 21 <th>名前</th> 22 <th>体調</th> 23 <th>水槽</th> 24 <th>開始</th> 25 <th>終了</th> 26 <th> </th> 27 <th colspan="6">A</th> 28 <th> </th> 29 <th>エリア</th> 30 </tr> 31 </thead> 32 <tbody id="bathtabArea-tbody" style="border-top:2px #C7C7C7 solid;"> 33 <tr> 34 <td> 35 <input id="fishPlus" value="+" type="button" class="fishAddList" onclick="fishClickPlus()"> 36 </td> 37 <td> 38 <input id="fishMinus" value="-" type="button" class="fishRemoveList" collapse> 39 </td> 40 <td> 41 <INPUT id="fishName" value="A"> 42 </td> 43 <td> 44 <select id="boilAbility" style="border:1px gray solid" onchange="fishgrandAbilLstChange(this)"> 45 <option value="energy">元気</option> 46 <option value="good">良好</option> 47 <option value="bad">不良</option> 48 </select> 49 </td> 50 <td> 51 <select id="boilMotion" style="border:1px gray solid;" onchange="fishgrandMotLstChange(this)"> 52 <option value="R">R</option> 53 <option value="L">L</option> 54 <option value="C">C</option> 55 </select> 56 </td> 57 <td> 58 <select id="fishStartTimeList" class="fishCntrlTime" onchange="fishTimeListChange(this,1)"> 59 <option value="0">00:00</option> 60 <option value="1">01:00</option> 61 <option value="2">02:00</option> 62 <option value="3">03:00</option> 63 </select> 64 </td> 65 <td> 66 <select id="fishEndTimeList" class="fishCntrlTime" onchange="fishTimeListChange(this,2)"> 67 <option value="0">00:00</option> 68 <option value="1">01:00</option> 69 <option value="2">02:00</option> 70 <option value="3">03:00</option> 71 </select> 72 </td> 73 <td> </td> 74 <td></td> 75 <td></td> 76 <td></td> 77 <td></td> 78 <td></td> 79 <td></td> 80 <td> </td> 81 <td><INPUT type="text" id="roomCnt" value="" disabled></td> 82 </tr> 83 </tbody> 84 </table> 85 </div> 86 </div> 87 </div> 88 </div> 89 </div> 90 </div> 91</body>
javascript
1let fishGlaphTime = [ 2 ['0','48'], 3 ['0','48'], 4 ['0','48'], 5 ['0','48'] 6 ]; 7let fishGlaphgrandAbility = [ 8 ['good'],['good'],['good'],['good'] 9 ]; 10 11let fishGlaphgrandMove = [['R'],['R'],['R'],['R']]; 12 13 14// 時間変更判別用フラグ 15let changeTimeFlag = false; 16 17$(document).ready(function() { 18/* 19 // 開始時間、終了時間を変更時、グラフを変更する 20 $(document).on('change', '.fishCntrlTime', function() { 21 $(this) 22 }); 23 24 // 体調を変更時、グラフを変更する 25 $(document).on('change', '#boilAbility', function() { 26 $(this) 27 }); 28 29 // 体調を変更時、グラフを変更する 30 $(document).on('change', '#boilAbility', function() { 31 $(this) 32 }); 33*/ 34}); 35 36function fishTimeListChange(obj,flag) { 37 38 let idx = obj.selectedIndex; 39 let text = obj.options[idx].text; 40 let result = text.split(":"); 41 let rownum = obj.parentNode.parentNode.rowIndex; 42 let row = document.getElementById("bathtabArea-tbody").rows.item(rownum-1); 43 let cell; 44 let startTime; 45 let endTime; 46 let drowcnt = 0; 47 let endtime2col; 48 49 if (flag == 1) { 50 fishGlaphTime[rownum-1][0] = Number(result[0]); 51 }else { 52 fishGlaphTime[rownum-1][1] = Number(result[0]); 53 } 54 55 startTime = $("#bathtabArea-tbody tr").eq(0).children('td').eq(4).find(".fishCntrlTime").val(); 56 endTime = $("#bathtabArea-tbody tr").eq(0).children('td').eq(5).find(".fishCntrlTime").val(); 57 58 //開始時間～終了時間の間のグラフ色をピンクに設定する 59 if (startTime < endtime2col) { 60 for (let i = startTime+7;i < endtime2col+7; i=i+2){ 61 for (let j = 0;j < 2; j++){ 62 drowcnt = i + j; 63 cell = row.cells.item(drowcnt); 64 cell.style.backgroundColor = "#F09199"; 65 } 66 } 67 } 68 changeTimeFlag = true 69} 70 71function fishgrandAbilLstChange(obj) { 72 73 if (changeTimeFlag == false){ 74 return; 75 } 76 let idx = obj.selectedIndex; 77 let grandAbility = obj.options[idx].value; 78 //操作したプルダウンの行番号を取得 79 let rownum = obj.parentNode.parentNode.rowIndex; 80 let row = document.getElementById("bathtabArea-tbody").rows.item(rownum-1); 81 let cell; 82 // 他のプルダウンが変更された際に、体調の直近の選択値として利用する為に格納 83 fishGlaphgrandAbility[rownum-1][0] = grandAbility; 84 85 // 水槽、開始時間、終了時間の直近の選択値を取出し 86 let grandMove = fishGlaphgrandMove[rownum-1][0]; 87 let startTime = fishGlaphTime[rownum-1][0]; 88 let endTime = fishGlaphTime[rownum-1][1]; 89 90 // 体調、水槽に応じて、グラフ色を変更する 91 let startCnt = parseInt(startTime)+6; 92 let endCnt = parseInt(endTime)+7; 93 let drwPos = 0; 94 let drwPosCenter = 0; 95 96 if (changeTimeFlag == true){ 97 if (startTime < endTime) { 98 // 水槽を変更した場合は体調の色を初期化(ピンク) 99 for (let i = startCnt;i < endCnt;i++){ 100 cell = row.cells.item(i); 101 cell.style.backgroundColor = "#F09199"; 102 } 103 if (grandMove == "R") { 104 drwPos = endCnt - 1; 105 cell = row.cells.item(drwPos); 106 } 107 } 108 109 } 110 // 体調を判定 111 if (fishGlaphgrandAbility[rownum-1][0] == "good") { 112 cell.style.backgroundColor = "#ffa07a"; 113 /* cell.style.backgroundColor = "hsl(0,0%,20%)"; */ 114 } else if (fishGlaphgrandAbility[rownum-1][0] == "bad") { 115 cell.style.backgroundColor = "#f08080"; 116 /* cell.style.backgroundColor = "hsl(0,50%,50%)"; */ 117 } else if (fishGlaphgrandAbility[rownum-1][0] == "energy") { 118 cell.style.backgroundColor = "#ff0000"; 119 /* cell.style.backgroundColor = "hsl(0,100%,100%)"; */ 120 } 121} 122 123function fishgrandMotLstChange(obj) { 124 125 if (changeTimeFlag == false){ 126 return; 127 } 128 129 // 選択された値を取得する 130 let idx = obj.selectedIndex; 131 let grandMotionVal = obj.options[idx].value; 132 133 //操作したプルダウンの行番号を取得 134 let rownum = obj.parentNode.parentNode.rowIndex; 135 let row = document.getElementById("bathtabArea-tbody").rows.item(rownum-1); 136 let cell; 137 138 // 他のプルダウンが変更された際に、体調の直近の選択値として利用する為に格納 139 fishGlaphgrandMove[rownum-1][0] = grandMotionVal; 140 141 // 水槽、開始時間、終了時間の直近の選択値を取出し 142 let grandMove = fishGlaphgrandMove[rownum-1][0]; 143 let startTime = fishGlaphTime[rownum-1][0]; 144 let endTime = fishGlaphTime[rownum-1][1]; 145 146 // 体調、水槽に応じて、グラフ色を変更する 147 if (grandMove == "R") { 148 drwPos = endCnt -1; 149 cell = row.cells.item(drwPos); 150 } else if (grandMove == "L") { 151 drwPos = startCnt; 152 cell = row.cells.item(drwPos); 153 } else if (grandMove == "C") { 154 drwPosCenter = startCnt + endCnt; 155 drwPos = Math.floor(drwPosCenter / 2); 156 cell = row.cells.item(drwPos); 157 } 158} 159
回答1件
0
自己解決
javascriptで関数化して実装することが出来ました。JQUERYの関数で実装したかったのですが諦めます。
投稿2021/07/20 07:51
総合スコア9
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。