PHP & JavaScript Room :: 設置サンプル

実行結果


《検索サイト》
サイト名 URL
Yahoo! JAPAN http://www.yahoo.co.jp/
Google http://www.google.co.jp/
goo http://www.goo.ne.jp/
Infoseek http://www.infoseek.co.jp/

ソース

<!-- テーブルの行をストライプに -->
<style type="text/css">
table.stripe {
    border:0;
    border-spacing:0;
    border-collapse:collapse;
    margin:0; padding:0;
}
    table.stripe th {
        border:1px solid #ccc;
        background-color:#666;
        color:#fff;
    }
    table.stripe td {
        border:1px solid #ccc;
    }
    table.stripe tr.bg02{
        background:#eee;
    }
</style>

<form action="#">
    <input type="button" onclick="fStripeTable()" value="行をストライプにする" />
</form>
<br>
<table class="stripe">
    <caption>《検索サイト》</caption>
    <tr>
        <th>サイト名</th>
        <th>URL</th>
    </tr>
    <tr>
        <td>Yahoo! JAPAN</td>
        <td>http://www.yahoo.co.jp/</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>http://www.google.co.jp/</td>
    </tr>
    <tr>
        <td>goo</td>
        <td>http://www.goo.ne.jp/</td>
    </tr>
    <tr>
        <td>Infoseek</td>
        <td>http://www.infoseek.co.jp/</td>
    </tr>
</table>

<script type="text/javascript">
function fStripeTable(){
    var tblObjAry=document.getElementsByTagName("table");
    for (var i=0; i<tblObjAry.length; i++){
        var tblObj=tblObjAry[i];
        if(tblObj.className=="stripe"){
            var rows=tblObj.getElementsByTagName("tr");
            for (var i=1; i<rows.length; i++){
                rows[i].className="bg02";
                i++;
            }
        }
    }
}
</script>

polarized women