2008年06月29日

テーブルの行の文字色,背景色を変えてハイライトします

スポンサード リンク

ブラウザのシェア (2008/04〜06)
No ブラウザ 2008/04 2008/05 2008/06
1 Internet Explorer 6.0 57.3% 55.5% 55.0%
2 Internet Explorer 7.0 24.7% 27.4% 24.8%
3 Internet Explorer 5.x 1.0% 1.1% 1.3%
4 Firefox 8.0% 7.4% 9.9%
5 Sleipnir 3.3% 2.6% 3.7%
6 Safari 2.5% 2.6% 2.8%
7 Lunascape 0.6% 0.5% 0.7%
8 Netscape 0.7% 0.6% 0.9%
9 Opera 0.8% 0.7% 0.7%
10 その他少数派 0.8% 1.2% 0.7%

*ブラウザのシェアはPage View :月間 10,000 ほどのサイトの数値です。
参考程度にしておいてください。。。

サンプルソース

<TITLE>テーブルの行の文字色,背景色を変えてハイライトします。</TITLE>
<script type="text/javascript">
<!--
//マウスが乗ったとき
function M_over(obj){
obj.style.backgroundColor = "#ccffff";
obj.style.color = "#ff0066";
}

//マウスが去ったとき
function M_out(obj){
obj.style.backgroundColor = "transparent";
obj.style.color = "black";
}

// -->
</script>

</HEAD>
<BODY>
<TABLE cellspacing="2" cellpadding="5" style="color : black;">
<CAPTION>ブラウザのシェア (2008/04〜06)</CAPTION>
<THEAD style="color :white;font-size : 14px;text-decoration : underline;background-color : #c105ff;">
<TR style="text-align : center;">
<TH>No</TH>
<TH width="170">ブラウザ</TH>
<TH width="80">2008/04</TH>
<TH width="80">2008/05</TH>
<TH width="80">2008/06</TH>
</TR></THEAD>
<tbody>
<TR onmouseover="M_over(this)" onmouseout="M_out(this)">
<TD>1</TD>
<TD>Internet Explorer 6.0</TD>
<TD>57.3%</TD>
<TD>55.5%</TD>
<TD>55.0%</TD>
</TR>
<TR onmouseover="M_over(this)" onmouseout="M_out(this)">
<TD>2</TD>
<TD>Internet Explorer 7.0</TD>
<TD>24.7%</TD>
<TD>27.4%</TD>
<TD>24.8%</TD>
</TR>
<TR onmouseover="M_over(this)" onmouseout="M_out(this)">
<TD>3</TD>
<TD>Internet Explorer 5.x</TD>
<TD>1.0%</TD>
<TD>1.1%</TD>
<TD>1.3%</TD>
</TR>
<TR onmouseover="M_over(this)" onmouseout="M_out(this)">
<TD>4</TD>
<TD>Firefox</TD>
<TD>8.0%</TD>
<TD>7.4%</TD>
<TD>9.9%</TD>
</TR>
</tbody>
</TABLE>
</BODY>
</HTML>

//マウスが乗ったとき
obj.style.backgroundColor = "#ccffff"// backgroundColor は背景色を指定するプロパティです。"#ccffff"で背景の色を指定します。
obj.style.color = "black";// color は文字の色を指定するプロパティです。"black" で文字色を指定します。

//マウスが去ったとき
obj.style.backgroundColor = "transparent";// backgroundColor の値に "transparent" を指定すると背景を透明にすることができます。
obj.style.color = "black";// もとの色に戻します。元の色はstyle="color : black;"で指定しています。この値は同じにしましょう。
"#ccffff""black"などのカラーコード、色の名前は自由に設定できます。
サンプルのテーブルの行は長くなってもソースを読みにくいだけなので,4行目までしか書いていません。



posted by javaScript at 21:15 | 大阪 ☔ | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。