2008年07月07日

テーブルの行の背景色を一行おきに変えます。

スポンサード リンク

OS のシェア (2008/04〜06)

No OS 4月 5月 6月
1 Windows XP 76.1% 75.9% 73.9%
2 Windows Vista 10.3% 11.9% 11.3%
3 Windows 2000 5.2% 4.9% 7.4%
4 Macintosh 3.6% 3.6% 4.0%
5 Windows 98 1.2% 1.0% 0.8%
6 Windows ME 1.6% 1.3% 0.8%
7 Linux 0.1% 0.1% 0.5%
8 その他少数派 0.9% 0.9% 0.7%

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

サンプルソース

<HTML>
<HEAD>
<TITLE>テーブルの行の背景色を一行おきに変えます。</TITLE>
<script language="JavaScript">
<!--
function cngrow_clr() {
var myTR =document.getElementById("myTBL").rows;
for (var i=0;i<myTR.length;i++) { // myTR.length でテーブルの行数を取得して 行数より少ないあいだ i を 1ずつ増やします。
    var v=i%2; //vという変数にiと2の剰余を代入しています。この場合 v は 0 と 1を繰り返します
       if (v==1) { // v が 1 のときmyTR[i].styleを実行します(i 番目の行の背景色と文字色を変更。
            myTR[i].style.backgroundColor = "#ffccff"; //i 番目の行の背景色を変更。
            myTR[i].style.color = "navy"; //i 番目の行の文字色を変更。
       }
   }
 }
//-->
</script>
</HEAD>
<BODY>
<TABLE id="myTBL">
<TBODY>
<TR>
<TH>No</TH>
<TH width="130">OS</TH>
<TH width="55">6月</TH></TR>
<TR><TD align="right">1</TD>
<TD>Windows XP</TD>
<TD align="right">73.9%</TD></TR>
<TR><TD align="right">2</TD>
<TD>Windows Vista</TD>
<TD align="right">11.3%</TD></TR>
<TR><TD align="right">3</TD>
<TD>Windows 2000</TD>
<TD align="right">7.4%</TD></TR>
<TR><TD align="right">4</TD>
<TD>Macintosh</TD>
<TD align="right">4.0%</TD></TR>
</TBODY>
</TABLE>
<INPUT type="button" name="bottan" value="一行おきに背景色を変えます" onclick="cngrow_clr()";>
</BODY></HTML>

テーブルのデータ取得

No OS 6月
1 Windows XP 73.9%
2 Windows Vista 11.3%
3 Windows 2000 7.4%
4 Macintosh 4.0%
var myTR=document.getElementById("myTBL1").rows;
 myTRに Id名が"myTBL1"のテーブルのすべての行の
オブジェクトが入っています。
myTR.length //テーブルの行数
myTR[1].innerHTML  //一行目の行データを取得

テーブル Cells 指定でセルデータ取得
myTR[2].cells[0].innerHTML //セル 二行目,0列の値の取得
myTR[2].cells[1].innerHTML //セル 二行,1列目の値の取得
myTR[2].cells[2].innerHTML //セル 二行,2列目の値の取得



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

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