テーブル行にCSSを使用してJavaScriptを短くする方法

2006/03/20 14:42

このQ&Aのポイント

JavaScriptを使用してテーブル行にクラスを追加するための効果的な方法を探しています。
テーブル行のHTMLコードを短くするために、JavaScriptを使用してCSSクラスを追加する方法を教えてください。
テーブル行のHTMLコードを簡潔にするために、JavaScriptを使用してクラスを追加する方法を教えてください。

php4
お礼率42% (373/888)

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

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

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

ベストアンサー

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

2006/03/22 20:02 回答No.2

どこかで見たような気がしたらphpMyAdminですね IE限定でしたら以下の感じでいけそうです。（FFではphpMyAdmin自体は動くのですが、このソースは動かないですね・・・まぁもうちょい調べます）ちなみに、phpMyAdminは行ごとに色換えしているので、一行おきにclass名をかえるか、分岐処理で色がえした方がよいかもしれませんね <script language="JavaScript"> function onloadFunc(){ var allTags = document.getElementsByTagName('tr'); for (var i =0;i<allTags.length;i++){ if(allTags[i].className=="line_color"){ allTags[i].number =i; allTags[i].onmouseover =function(){setPointer(this, this.number,'over', '#DDDDDD','#CCFFCC','#FFCC99');}; allTags[i].onmouseout= function(){setPointer(this, this.number,'out', '#DDDDDD','#CCFFCC','#FFCC99');} allTags[i].onmousedown= function(){setPointer(this, this.number,'click','#DDDDDD','#CCFFCC','#FFCC99');} } } } </script> </head> <body onLoad="onloadFunc()"> <table> <tr class="line_color"><td>テスト</td></tr> <tr class="line_color"><td>テスト</td></tr> <tr class="line_color"><td>テスト</td></tr> </table> </body>

その他の回答 (1)

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

2006/03/20 15:32 回答No.1

setPointer関数がどんなものかわからないのでなんともいえませんが、以下のような様式でいかがでしょうか？ <html> <head> <script language="javascript"> function onloadFunc(){ var allTags = document.getElementsByTagName('*'); for (var i =0;i<allTags.length;i++){ if(allTags[i].className=="line_color"){ allTags[i].onmouseover=function(){setPointer(this, 0, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99');} allTags[i].onmouseout=function(){setPointer(this, 0, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99');} allTags[i].onmousedown=function(){setPointer(this, 0, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99');} } } } </script> </head> <body onLoad="onloadFunc()"> <table> <tr class="line_color"><td>テスト</td></tr> </table> </body> </html>

質問者

お礼 2006/03/22 12:18

setPointer関数はphpMyAdminというフリーソフトにあるjavascriptの関数で長くて貼り付けられそうませんでした。行に色を塗ったり塗らなかったりします。教えていたただいた方法で１．getElementsByTagName('*')の*をtrに２．this, 0,をthis, i, ３．下記のようにHTMLを３行に <tr class="line_color"><td>テスト</td></tr> <tr class="line_color"><td>テスト</td></tr> <tr class="line_color"><td>テスト</td></tr> してみましたのですが、クリックした行がオレンジ色に変わるのですが、最初にクリックした行しか色が変わりませんでした。惜しいです。でも、こういう書き方があるんだというのことがわかっただけでも大変参考になりました。ありがとうございます。