Tableの枠線（内・外）色を変更

解決済

質問者：ENTRE
質問日時：2008/02/26 15:51
回答数：3件

Tableの枠線（内・外）色を変更する場合、
CSSだと、

.Table {
border-color:#FFFFFF;
}
.Table TD{ border-color:#FFFFFF;}
.Table TR{ border-color:#FFFFFF;}

で変更できますが、
これをJacasvriptで対応するにはどのようにしたらいいのでしょうか？

FireFoxもIEも対応したいと思っています。
BorderColor="#FFFFFF"だけだと、
FireFoxで枠線の外側しか変更できません。

たぶんCSSと組み合わせる必要があると思います。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： leap_day
回答日時：2008/02/27 06:33

こんにちは

こんな感じ？

<script type="text/javascript"></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')">

- 0
- 件

通報する

No.2

回答者： SAYKA
回答日時：2008/02/26 17:54

http://www.tohoho-web.com/js/dom.htm#getElements …
↑で操作タグを特定して
http://www.tohoho-web.com/js/style.htm
↑で操作

が妥当じゃないかな。

そうじゃなくて全体のをjavascriptで変更する方法？

- 0
- 件

通報する

No.1

回答者： GreenCup
回答日時：2008/02/26 17:53

ご要望に沿っているかどうか解りませんが、

下記の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">

</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す。