Q&A
imgタグのstyleを直接いじっているのでしょうか？classの付け外しで処理するほうが現実的だとおもいますが
お世話になっております。
新人プログラマーです。
現在JavaScriptでUI開発をしております。
###前提・実現したいこと
表を用いて行選択をするために、行をクリックすると
背景色が変わるようなイベントを実装しています。
そこで、表にデータがないときに背景色が変わらないように
したいです。
###試していること
データがないときはimgタグを非表示にするようにしているので
いimgタグのstyleを参照するようにしたいと思っています。
###できていること
選択した行の背景色を変えること、もう一度クリックで元に戻すこと
選択可能数だけの背景色を変えること、表のデータ表示
###該当のソースコード
html
1<body onload="getJson();changeimg();pager()"> 2 略 3<tr class="even" onclick="Click_Sub(this)"> 4 <td width="40"><img id="gazo1" alt="pdffile"></td> 5 <td id="dataname1"><font size="3"></font></td> 6</tr> 7 略 8<script> 9 var count=0; //現在の選択数 10 var countmax=3; //選択可能数 11 var pagetop=0; //表示中ページの先頭データ 12 var datamax=5; //表示最大数 13 var data = [ 14{ 15 "name":"参考資料", 16 "updated":"", 17 "type":"folder", 18}, 19 20{ 21 "name":"2017_05_15.CrewA.pdf", 22 "updated":"", 23 "type":"file", 24}, 25 26{ 27 "name":"2017_05_15.CrewB.pdf", 28 "updated":"", 29 "type":"file", 30}, 31] 32 略 33 function Click_Sub(obj){ 34 if( ??????== ??????){ 35 return; 36 } 37 if(obj.style.backgroundColor=='red'){ 38 obj.style.backgroundColor=''; 39 count--; 40 }else{ 41 if(count==countmax){ 42 return; 43 } 44 obj.style.backgroundColor='red'; 45 count++; 46 } 47 } 48 49 function changeimg(){ 50 for(var j=0; j<datamax; j++){ 51 if(data[j + pagetop] == null){ 52 document.getElementById("gazo"+ j).style.visibility = "hidden"; 53 continue; 54 } 55 document.getElementById("gazo"+ j).style.visibility = "visible"; 56 if(data[j + pagetop].type=="folder"){ 57 document.getElementById("gazo"+ j).src=img[0].src; 58 }else{ 59 document.getElementById("gazo"+ j).src=img[1].src; 60 } 61 } 62 } 63 function getJson(){ 64 for(var i=0; i<datamax; i++){ 65 var elem = document.getElementById("dataname"+ i); 66 if(data[i + pagetop] == null){ 67 elem.innerText = null; 68 }else{ 69 elem.innerText = data[i + pagetop].name; 70 } 71 } 72 } 73 略 74</script>
###補足情報(言語/FW/ツール等のバージョンなど)
文章、ソースコードの修正点や改善点がありましたら
教えていただけると幸いです。
JSONとかページャーとか設置される予定？のようですが、PHP使える環境なのであればonloadで書き換えるのではなく先にデータの確認・調整してからHTML表示したい内容ですね・・・。
幾つかいきなり使われている変数（data,datamax,countmax,pagetopなど）があります。それぞれどのように定義されるのか、その部分もソース提示願います。
現在のソースコードにおける「おきていること」「できていないこと」「調べたこと」を追記願います。
「dataが表示されているという前提」が必要です。getJson()のコードも追記してください。
ご指摘ありがとうございます。勉強しながらの開発になるため、現実的な処理方法も勉強中という状況です。
回答4件
0
classをimgとtrに貼ってみました
<style> .hide{visibility:hidden} tr.checked{background-Color:aqua}; </style> <script> document.addEventListener('click',function(e){ var t=e.target; if(t.nodeName=="TD") t=t.parentNode; if(t.nodeName=="TR"){ var flg=!t.classList.contains("checked"); t.querySelector('img').classList.toggle('hide',flg); t.classList.toggle('checked'); } }); </script> <table> <tr> <td><img alt="img"></td> <td>test</td> </tr> <tr class="checked"> <td><img alt="img" class="hide"></td> <td>test</td> </tr> <tr> <td><img alt="img"></td> <td>test</td> </tr> <tr> <td><img alt="img"></td> <td>test</td> </tr> </table>
投稿2017/08/31 06:44
総合スコア114839
0
ベストアンサー
アイデアのひとつとして捉えていただきたいのですが、
getJson()にてdataより情報をtableのそれぞれの行に埋め込んでるんですよね？
ということであれば、データがあるかないかはgetJson()時点で分かっていることなので、
- getJson()にてデータがないとき（ケースが少し思い浮かびませんが、dataのそれぞれの情報のnameが空の時とかでしょうか）はimgおよびdataname内の情報を空にする（<td>~</td>のみで何も表示しないという理解で結構です）
- 行クリック時にid=dataname+nのtd内が空のとき（innerHTMLとかで中身とれるはず）には何もしない ←ここは???==???のところですかね
という形にしてはどうでしょうか？
つまりchangeimg()は必要なく、データ取得時・設置時とクリック時のみで対応するということです。
imgの用途と役割によりますが、データがなければ表示されないのでわざわざ非表示のstyleをあてるのではなく、最初から何も置かないという考え方ですね。
投稿2017/08/31 06:32
編集2017/08/31 06:42総合スコア80850
回答ありがとうございます。
その方法で書いてみたいと思います。
回答後半にも書いたのですが、imgは何の用途で置いているのでしょうか？
getJson()で何かしているわけでもないようですし。
imgでアイコンの切り替えをしています。
dataがtype:folderのときにフォルダーのアイコン表示
type:fileのときにファイルのアイコン表示という用途で置いています。
なるほど。getJson()のときに置く画像を切り替えてるわけですね
「データがないとき」というのはどういったケースですか？
そうなります。
「データがないとき」はページ遷移で最後のページに移動しても
行は表示可能数まで表示するため、そこにデータがないときの
行の余りになります。
なるほど。pager()が関係してくるわけですね。（pager()は未実装？）
それならやはり「getJson()時に表示しない」のが効率的です。
アドバイスありがとうございます。(pagerは実装済みです)
実現したい動きができました！
余計な関数や処理もなくして、実装を進めていきたいと思います。
あなたの回答
tips
プレビュー
