• ベストアンサー

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/2523)

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.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>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</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)
回答No.2

http://www.tohoho-web.com/js/dom.htm#getElementsByTagName ↑で操作タグを特定して http://www.tohoho-web.com/js/style.htm ↑で操作 が妥当じゃないかな。 そうじゃなくて全体のをjavascriptで変更する方法？

  • GreenCup
  • ベストアンサー率53% (7/13)
回答No.1

ご要望に沿っているかどうか解りませんが、 下記の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す。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 特定のテーブルのみ枠線の色を消したい

    スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？

    • ベストアンサー
    • CSS
  • CSS tableの色

    スタイルシートについてお聞きします。 htmlの<table>の<tr>の枠線の色を変更したいのですが、CSSの場合はどのように記述すればよろしいのでしょうか？ よろしくお願いします。 htmlの場合 <table> <tr><td bordercolor="FFFFFF">内容</td></tr> </table>

    • ベストアンサー
    • HTML
  • テーブル・セル枠線の色

    下記のようにテーブルを組むと、IEでは1pxの赤いボーダーで表示されるのですが、 ネスケだとグレーの太い線になってしまいます。 どのように変えたらよいのでしょうか。 <TABLE border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF5F8D" width="100%"> <TR> <TD width="50%">　</TD> <TD width="50%">　</TD> </TR> </TABLE>

    • ベストアンサー
    • HTML
  • テーブルの枠線

    IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。（画像添付） IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。（IE=edge） IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか？ widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non">　</td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブルの枠線の色を指定したい。

    http://www.kanzaki.com/docs/html/htminfo16.html を参考に、 --------------------------------------- <table> <tr> <td>りんご</td> <td>甘酸っぱい</td> <td>おおむね赤</td> </tr> <tr> <td>なつみかん</td> <td>かなり酸っぱいと思う</td> <td>たいてい黄色</td> </tr> </table> --------------------------------------- と言うテーブルに対して、 --------------------------------------- <style> table { border-collapse: collapse; } td { border: solid 1px; padding: 0.5em; } </style> --------------------------------------- と記述して、枠線を付けたのですが、枠線の色を指定する事は出来ますか？ 赤にしたいです。ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • FireFoxでのtable枠線の表示/非表示

    下記HTMLコードは テーブル(TDレベル)の枠線を表示するCSSクラスと 非表示とするCSSクラスを用意し、ボタンを押す事 によりjavascriptでCSSクラスを変更するものです。 <html> <head> <style TYPE="text/css"><!-- table.tclass { border-collapse:collapse; } td.b { border: 1px solid; border-color:#000000; } td.w { border:noe; border-color:#FFFFFF; } --></style> <script Language="JavaScript"><!-- function delLine(elem){ var obj = document.getElementById(elem); obj.className = "w"; } // --></script> </head> <body> <table class="tclass"> <tr> <td class="b" id="td1">Table1</td> <td class="b" id="td2">Table2</td> </td> </tr> </table> <button type='button' onclick='delLine("td2");' >枠線を消す</button><br> </body> </html> 上記のように２つのテーブルセルのうち、右側セルの枠線を 消したいのですが、 右側セルの右枠だけ消えて、残りの枠は表示され たままになります。 因みに onclick='delLine("td1");delLine("td2");' のように、両方のセルともに枠線を消す場合は問題ありません。 また、tableタグのborder-collapse:collapse指定を外しても 成功する事を確認していますが、border-collapse:collapseは できれば指定したいです。 また、FireFox以外ではIE、safari、operaでは問題ありません。 何か対処方法をお分かりの方がおりましたらお教えください。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • テーブルの枠線に色が付かない

    ファイアフォックスだと色が付くのに、IEだと黒になってしまいます。 テーブルのタグは <table border=1 bordercolor="#ff0000" cellspacing=0> にしています。 ＩＥでも色を付けたい場合はどう書けばいいでしょうか？

    • ベストアンサー
    • HTML
  • 枠線が表示されません

    初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか？ 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css"　type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線（太さ・色・スタイル）solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色：青 */ .white{ background-color: #FFFFFF; } /* セル色：白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }

    • 締切済み
    • CSS
  • テーブルの中のリンクにつく枠を消したい

    ブログのカレンダーです。背景色のテーブルの中のリンク文字の周りに白い枠線ができてしまいます。枠線の取り方をご教授ください＞＜ ＊HTML＊ <table border="0" cellspacing="1" bgcolor="#ddd"> <tr><td id="calendar_${CALENDAR_CODE}"></td> </tr></table> ＊CSS＊ #calendar table {width: 698px;margin: 0px auto;background: #000000;color: #FFFFFF;} #calendar td {text-align: center;color: #ffffff;} #calendar td a {background: #000000; color: #FFFFFF;} #calendar td a:hover,#calendar td a:active {background: #888888;color: #FFFFFF;}

  • テーブル内画像の枠線の色

    DreamWeaverで製作中なのですが、テーブル内に画像を配置して、枠線を表示させたいのです。 ボーダー指定すると標準で黒なので、色指定してみようとやってみたのですが出来ませんでした。タグは以下の通りです。 <td rowspan="2" align="center" valign="middle"><img src="img/sports_small.jpg" width="111" height="136" border="2" bordercolor="#99cc00"></td> この後半の　bordercolor="#99cc00"　ではダメなのでしょうか？教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する