- ベストアンサー
Tableの枠線（内・外）色を変更
Tableの枠線（内・外）色を変更する場合、 CSSだと、 .Table { border-color:#FFFFFF; } .Table TD{ border-color:#FFFFFF;} .Table TR{ border-color:#FFFFFF;} で変更できますが、 これをJacasvriptで対応するにはどのようにしたらいいのでしょうか？ FireFoxもIEも対応したいと思っています。 BorderColor="#FFFFFF"だけだと、 FireFoxで枠線の外側しか変更できません。 たぶんCSSと組み合わせる必要があると思います。 よろしくお願いします。
- ENTRE
- お礼率0% (16/2525)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは こんな感じ？ <script type="text/javascript"><!-- function ch(Color) { ta = document.getElementById("Table"); tb = ta.getElementsByTagName("td"); ta.style.borderColor = Color; for(i=0;i<tb.length;i++) { tb[i].style.borderColor = Color; } } //--></script> <style type="text/css"> #Table { border:1px solid; } td { border:1px solid; } </style> <table id="Table"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> <input type="button" value="blue" onclick="ch('blue')"> <input type="button" value="red" onclick="ch('red')"> <input type="button" value="lawngreen" onclick="ch('#7CFC00')"> <input type="button" value="yellow" onclick="ch('#FFFF00')">
その他の回答 (2)
- SAYKA
- ベストアンサー率34% (944/2776)
http://www.tohoho-web.com/js/dom.htm#getElementsByTagName ↑で操作タグを特定して http://www.tohoho-web.com/js/style.htm ↑で操作 が妥当じゃないかな。 そうじゃなくて全体のをjavascriptで変更する方法？
- GreenCup
- ベストアンサー率53% (7/13)
ご要望に沿っているかどうか解りませんが、 下記のHTMLは、ボタンをクリックして特定のTableの線色を変更できます。 （IE6 SP1とFireFox2.0.0.12で動作確認済） ポイントは ・TableにIDをつける ・TableとTD用のスタイルを、各２種類用意 ・javascriptで、TableとTDのスタイル名を変更している という3点です。 <html> <head> <style type="text/css"> table.table_red { border-style: solid; border-width: 1px; border-color: #ff0000; } table.table_blue { border-style: solid; border-width: 1px; border-color: #0000ff; } td.td_red { border-style: solid; border-width: 1px; border-color: #ff0000; } td.td_blue{ border-style: solid; border-width: 1px; border-color: #0000ff; } </style> <script type="text/javascript"> <!-- function change_color() { document.all.tb1.className = "table_blue"; for ( i = 0; i < document.all.tb1.rows.length; i++ ) { for ( k = 0; k < document.all.tb1.rows[i].cells.length; k++ ) { document.all.tb1.rows[i].cells[k].className = "td_blue"; } } } //--> </script> </head> <body> <table id="tb1" class="table_red"> <tr> <td class="td_red">AAAAAAA</td> <td class="td_red">BBBBBBB</td> </tr> </table> <input type="button" name="btn1" value="色変更" onClick="change_color();"> </body> </html> ちなみにIEの場合、Javascriptのループは for ( i = 0; i < document.all.tb1.cells.length; i++ ) { document.all.tb1.cells[i].className = "td_blue"; } これだけでもOKですが、FireFoxはNGす。
