ベストアンサー

列もハイライト

2007/12/19 13:32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ハイライト(JavaScript)</title> </head> <body> <script type="text/javascript">  </script> <table border="1" style="border-collapse:collapse"> <tr><th>氏名</th><th>日付</th></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒1</td><td>2005/04/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒2</td><td>2004/02/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒3</td><td>2004/10/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒4</td><td>2004/08/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒5</td><td>2005/06/01</td> </table> </body> </html> で行にハイライトを設定しているのですが、同時に列にも同じようにハイライトを設定したいと思っております。どのように変更したらよいでしょうか？ご存知の方、宜しくお願いします。

noname#46712

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2007/12/19 13:38 回答No.1

http://c-man.s21.xrea.com/mars/md20050202b.html こちらのページ（のソース）が参考になると思います。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

yambejp
ベストアンサー率51% (3827/7415)

2007/12/19 14:22 回答No.2

こんな感じでどうでしょ？ <html> <head> <title>ハイライト(JavaScript)</title> <script type="text/javascript"> window.onload=function(){ var tags=document.getElementsByTagName("td"); for(var i=0;i<tags.length;i++){ tags[i].onmouseover=function(){ this.parentNode.style.backgroundColor="#00FFFF"; var tags=this.parentNode.getElementsByTagName("td"); for(var j=0;j<tags.length;j++) if(tags[j]==this) var num=j; var cols=this.parentNode.parentNode.parentNode.getElementsByTagName("col"); cols[num].style.backgroundColor="#00FFFF"; } tags[i].onmouseout=function(){ this.parentNode.style.backgroundColor=""; var tags=this.parentNode.getElementsByTagName("td"); for(var j=0;j<tags.length;j++) if(tags[j]==this) var num=j; var cols=this.parentNode.parentNode.parentNode.getElementsByTagName("col"); cols[num].style.backgroundColor=""; } } } </script> <style> table{ border-collapse:collapse; } td,th{ border:1px solid #000000; } </style> </head> <body> <table> <col> <col> <thead> <tr><th>氏名</th><th>日付</th></tr> </thead> <tbody> <tr> <td>生徒1</td><td>2005/04/01</td></tr> <tr> <td>生徒2</td><td>2004/02/01</td></tr> <tr> <td>生徒3</td><td>2004/10/01</td></tr> <tr> <td>生徒4</td><td>2004/08/01</td></tr> <tr> <td>生徒5</td><td>2005/06/01</td> </tbody> </table> </body> </html>

ログインすると、全ての回答が全文表示されます。