- ベストアンサー
テーブルでのハイライト表示について教えて下さい
皆さんこんばんわ。 いつも利用させてもらっています。 HTMLとJAVA SCRIPTの初心者です。 テーブルでのonmauseoverになっている時のハイライトにする 方法を教えて下さいTT trをハイライトにするという内容の質問はありましたが、 今回は途中で背景色が変わるため、 どうしても作ることができませんでした。 一つ一つIDをふり、onmouseoverでの処理をさせてみましたが、 FirefoxではDOCTYPEの違いからか、エラーが出て表示することが できませんでした。 項目的には残り１００項目ほどありますので、どなたかお教え いただけませんでしょうかTT よろしくお願いします。 以下、ソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> function TDBC0() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD2.style.background='#FFFFCC'; TD3.style.background='#FFFFCC'; TD4.style.background='#FFFFCC'; TD5.style.background='#FFFFCC'; TD6.style.background='#FFFFCC'; TD7.style.background='#FFFFCC'; } function TDBC0C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD2.style.background='#f1f1e0'; TD3.style.background='#ffffff'; TD4.style.background='#ffffff'; TD5.style.background='#f1f1e0'; TD6.style.background='#fafaf5'; TD7.style.background='#fafaf5'; } //身体測定 体重 function TDBC1() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD2.style.background='#FFFFCC'; TD3.style.background='#FFFFCC'; TD4.style.background='#FFFFCC'; } function TDBC1C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD2.style.background='#f1f1e0'; TD3.style.background='#ffffff'; TD4.style.background='#ffffff'; } //身体測定 体重 function TDBC2() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD5.style.background='#FFFFCC'; TD6.style.background='#FFFFCC'; TD7.style.background='#FFFFCC'; } function TDBC2C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD5.style.background='#f1f1e0'; TD6.style.background='#fafaf5'; TD7.style.background='#fafaf5'; } </script> <head> <body> <table border="1" cellpadding="0" cellspacing="0" class="tbl004"> <tr> <th rowspan="2" bgcolor="#C4E5FA" class="bg1">分 類</th> <th rowspan="2" bgcolor="#C4E5FA" class="bg1">種類</th> <th colspan="2" bgcolor="#C4E5FA" class="bg1">在庫数</th> </tr> <tr> <th bgcolor="#C4E5FA" class="bg1">下 限</th> <th bgcolor="#C4E5FA" class="bg1">上 限</th> </tr> <tr> <th rowspan="2" bgcolor="#f1f1e0" class="tdBgcolor02" id="TD1" onmouseover="TDBC0()" onmouseout="TDBC0C()">書籍</th> <td bgcolor="#f1f1e0" class="tdBgcolor02" id="TD2" onmouseover="TDBC1()" onmouseout="TDBC1C()">単行本</td> <td bgcolor="#ffffff" id="TD3" onmouseover="TDBC1()" onmouseout="TDBC1C()">50</td> <td bgcolor="#ffffff" id="TD4" onmouseover="TDBC1()" onmouseout="TDBC1C()">270</td> </tr> <tr> <td bgcolor="#f1f1e0" id="TD5" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor02">文庫本</td> <td bgcolor="#cccccc" id="TD6" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor03">10</td> <td bgcolor="#cccccc" id="TD7" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor03">300</td> </tr> </table> </body> </html>
- nepiapi
- お礼率46% (6/13)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと汎用性に欠けるけど、 色の指定は全てCSSにする、 body内にごちゃごちゃ書かない、 行が増えても改造の必要がないように、書いてみました。 参考までに。 (theadとtbodyに分けたり、「種類」のカラムをthに変更したり、多少構成を変えてます。) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> table{ border-collapse:collapse; } th,td{ padding:0; border:solid 2px #999999; } td{text-align:right;font-family:monospace;} thead{ background-color:#C4E5FA; } tbody th{ background-color:#f1f1e0; } .bunko td{ background-color:#cccccc; } .highlight{ background-color:#FFFFCC !important; } </style> <script type="text/javascript"> if(window.addEventListener) { for (var property in Event.prototype){ if(property.match(/MOUSE|CLICK/)){ window.addEventListener(property.toLowerCase(), function(e){ window.event = e; }, true); } } } var CurrentHighlight=new Array;//ハイライト中のセル function Highlight(flag){ //ハイライト解除 while(CurrentHighlight[0]){ CurrentHighlight[0].className=''; CurrentHighlight.shift(); } if(!flag) return; var C=event.srcElement||event.target; while(C&&C.nodeName!='TH'&&C.nodeName!='TD')C=C.parentNode; if(! C) return; var R=C.parentNode; for(var j=0;R.cells[j];j++){ R.cells[j].className='highlight'; CurrentHighlight.push(R.cells[j]); } if(C.rowSpan>1){ for(var i=C.rowSpan;i>1;i--){ R=R.parentNode.rows[R.sectionRowIndex+1]; for(var j=0;R.cells[j];j++){ R.cells[j].className='highlight'; CurrentHighlight.push(R.cells[j]); } } }else{ while(R.cells[0].rowSpan<2)R=R.parentNode.rows[R.sectionRowIndex-1]; R.cells[0].className='highlight'; CurrentHighlight.push(R.cells[0]); } } </script> </head> <body> <table> <thead> <tr> <th rowspan="2">分類</th> <th rowspan="2">種類</th> <th colspan="2">在庫数</th> </tr> <tr> <th>下限</th> <th>上限</th> </tr> </thead> <tbody onmouseover="Highlight(true)" onmouseout="Highlight(false)"> <tr> <th rowspan="2">書籍</th> <th>単行本</th><td>50</td><td>270</td> </tr> <tr class="bunko"> <th>文庫本</th><td>10</td><td>300</td> </tr> </tbody> </table> </body> </html>
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
・ テーブルにアクセスするには rows[].cells[] を使います。 ・ TD1~TD7 の名前は付け直したほうがよいかもしれませんが、 TD20,TD21,TD22, ... 等 ・ そのままで修正してみると、JavaScriptの最初の部分に <script type="text/javascript"> ------------------------------------------------------------ var TD1; var TD2; var TD3; var TD4; var TD5; var TD6; var TD7; function $(id) { return document.getElementById(id); } window.onload=function(){ var t = $('table1'); TD1 = t.rows[2].cells[0]; TD2 = t.rows[2].cells[1]; TD3 = t.rows[2].cells[2]; TD4 = t.rows[2].cells[3]; TD5 = t.rows[3].cells[0]; TD6 = t.rows[3].cells[1]; TD7 = t.rows[3].cells[2]; } ------------------------------------------------------------ を付け加えてみてください。
お礼
autyさん 回答下さいましてありがとうございます！ まさかこんなにも早くに回答を頂けるなんて思っていませんでしたTT テーブルにアクセスする場合にはこういう書き方をしたらいいんですね。 どうしたらいいのか分からず、右往左往していました。 お忙しいところ、ありがとうございました～＾＾
補足
autyさん 教えていただいた内容をコピーして貼り付けてみたんですが、 なかなか動作してくれませんでした。 下記のような記述でよかったんでしょうか？ <script type="text/javascript"> var TD1; var TD2; var TD3; var TD4; var TD5; var TD6; var TD7; function $(id) { return document.getElementById(id); } window.onload=function(){ var t = $('table1'); TD1 = t.rows[2].cells[0]; TD2 = t.rows[2].cells[1]; TD3 = t.rows[2].cells[2]; TD4 = t.rows[2].cells[3]; TD5 = t.rows[3].cells[0]; TD6 = t.rows[3].cells[1]; TD7 = t.rows[3].cells[2]; } function TDBC0() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD2.style.background='#FFFFCC'; TD3.style.background='#FFFFCC'; TD4.style.background='#FFFFCC'; TD5.style.background='#FFFFCC'; TD6.style.background='#FFFFCC'; TD7.style.background='#FFFFCC'; } function TDBC0C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD2.style.background='#f1f1e0'; TD3.style.background='#ffffff'; TD4.style.background='#ffffff'; TD5.style.background='#f1f1e0'; TD6.style.background='#fafaf5'; TD7.style.background='#fafaf5'; } //身体測定 体重 function TDBC1() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD2.style.background='#FFFFCC'; TD3.style.background='#FFFFCC'; TD4.style.background='#FFFFCC'; } function TDBC1C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD2.style.background='#f1f1e0'; TD3.style.background='#ffffff'; TD4.style.background='#ffffff'; } //身体測定 体重 function TDBC2() { //背景を設定 TD1.style.background='#FFFFCC'; TD1.style.background='#FFFFCC'; TD5.style.background='#FFFFCC'; TD6.style.background='#FFFFCC'; TD7.style.background='#FFFFCC'; } function TDBC2C() { //背景を元に戻す TD1.style.background='#f1f1e0'; TD5.style.background='#f1f1e0'; TD6.style.background='#fafaf5'; TD7.style.background='#fafaf5'; } </script>
お礼
steel_grayさん わわわ！すごい！ こんな短時間でここまでなってしまうんですね！ 色の指定はCSSを使うんですね。 何をどうしたらいいのか分からず、質問のような書き方になってしまいましたTT ご教授いただけた内容は、とても勉強になりました。 お忙しいところ、本当にありがとうございました。