- ベストアンサー
tableのtrの要素数を番号順に取得したい
現在、tableでのデザインを考えています。 やりたい事はテーブルにマウスカーソルを合わせた際にカーソルを合わせた行の色を変えるというものです。またjavascriptは外部ファイル化したいと考えていますが、javascriptの知識がなく困っておりまして 申し訳御座いませんが皆様どうぞよろしくお願い致します。 http://www.tagindex.com/kakolog/q2bbs/1/114.html こちらのページの2005/07/27 16:50に投稿された方のソースを参考に html内ではこのような感じで <body onload="CellColorAlternate();"> テーブルでは <table onmouseover="CellColorAll()" onmouseout="CellColorAlternate()"> 外部ファイルでは function CellColorAlternate(){ var cell = document.getElementsByTagName("tr"); for (i = 0; i < cell.length; i++) { if(!(i%2)){ cell[i].style.backgroundColor = "#CCFFCC"; } else { cell[i].style.backgroundColor = "#FFCCCC"; } } } function CellColorAll(obj){ var cell = document.getElementsByTagName("tr"); for (i = 0; i < cell.length; i++) { if(!(i%2)){ cell[i].style.backgroundColor = "#FFCCCC"; } else { cell[i].style.backgroundColor = "#CCFFCC"; } } } このようにするとカーソルを合わせた時にすべての行が入れ子にはなるのですが、上記の外部ファイルに付け加えるような形でこれをマウスを合わせた部分だけ変更するにはどのようにしたらよろしいのでしょうか？
- singosingosingo
- お礼率80% (8/10)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
//外部スクリプト window.onload=function(){ var TRs = document.getElementsByTagName("tr"); var len = TRs.length; for(var i=0;i<len;i++){ TRs[i].onmouseover=function(){ this.style.backgroundColor="#CFC"; }; TRs[i].onmouseout=function(){ this.style.backgroundColor=""; }; } }; … body と table には特になにも付加する必要はありません。 <body> <table>
その他の回答 (2)
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN"> <html><head><title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="external.js"> </head> <body> <table width="200" border="1"> <tr id="tr1" onmouseover="bcolor(this.id);" onmouseout="bcolor(this.id);"> <td >少年易老</td><td >学難成</td></tr> <tr id="tr2" onmouseover="bcolor(this.id);" onmouseout="bcolor(this.id);"> <td >一寸光陰</td><td >不可軽</td></tr> </table> </body> </html> ----external.js---------------- function bcolor(d_name){ if (document.getElementById){ var tcell = document.getElementById(d_name).style; if(tcell.backgroundColor=='yellow')tcell.backgroundColor='white'; else tcell.backgroundColor='yellow'; } } -------------------------------
お礼
ソースを教えていただきましてありがとうございます。 とても参考になりましたｍ（＿＿）ｍ
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
互い違いに色を付けるのは止めるということですか？
補足
質問の仕方が変で申し訳ありませんでした。 質問内の入れ違いに色を変更する外部ファイル内の記述は削除し、やりたい事は マウスカーソルをのせた「行」だけ色を変更したいということです。 またjavascript部分は外部ファイルで記述したいと考えています。 あとseoの事を考え、 <td>この部分</td> テーブル内の「この部分」にあたる文字列は 外部ファイルの中に配列のようにはせずに 拡張子htmlのファイルの中に記述したいと 考えています。 どうぞよろしくお願い致します。
お礼
BLUEPIXYさんもソースを教えていただきましてありがとうございます。参考にさせていただき勉強になりました。ありがとうございますｍ（＿＿）ｍ