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

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

<form action="#">
    <p><input type="button" onclick="swRowColor()" id="btn_attributes2" value="枠線を太くする" /></p>
</form>

<table border="1" id="atbl">
    <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 swRowColor(){
    var tblObjAry=document.getElementsByTagName("table");
    var btnObj=document.getElementById("btn_attributes2");
    for (var i=0; i<tblObjAry.length; i++){
        var tblObj=tblObjAry[i];
        if(tblObj.id=="atbl"){
            var tblAttributes=tblObj.attributes;
            for (var i=0; i<tblAttributes.length; i++){
                if(tblAttributes[i].nodeName.toLowerCase()=="border"){
                    tblObj.border=(tblObj.border=="10") ? "0" : "10";
                    btnObj.value=(tblObj.border=="10") ? "枠線なし" : "枠線を太くする";
                }
            }
        }
    }
}
</script>