HOME       LIST

【Javascript】分かりやすくラインを選択する

テーブルの tr タグ部分に背景色を表示してどの部分を選んでいるのかをわかりやすくさせる。

仕事に重要ではないのはない。リストアップして優先順位を決めて確実に進んで行くのが大事。2016/07/04(DOJEUN)

A little goes a long way.(少しで充分/ちょっとでいい)


<html>
<head><title>分かりやすくラインを選択する</title>
<script language="javascript">
<!--
var gvMOverColor = "#DCDCDC";
var gvSelTrColor = "#FFCC00";
var selTRObj="";

function fncChgBgColor(p1,p2){
    if(p2=="CLICK"){    
        if(selTRObj != ""){
            selTRObj.style.backgroundColor="";
        }
        selTRObj = p1;
        p1.style.backgroundColor = gvSelTrColor;
    }
    if(p2 == "OVER" && p1 != selTRObj) {p1.style.backgroundColor = gvMOverColor;}
    if(p2 == "OUT"  && p1 != selTRObj) {p1.style.backgroundColor="";}
}
//-->
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
    <tr bgcolor="blue">
        <td colspan="2"><font color="white">分かりやすくラインを選択する</font></td>
    </tr>
    <tr onclick="fncChgBgColor(this,'CLICK')" onMouseover="fncChgBgColor(this,'OVER')" onMouseout="fncChgBgColor(this,'OUT')">  
        <td width="40">1</td><td width="80">青森</td>
    </tr>   
    <tr onclick="fncChgBgColor(this,'CLICK')" onMouseover="fncChgBgColor(this,'OVER')" onMouseout="fncChgBgColor(this,'OUT')">  
        <td>2</td><td>岩手</td>
    </tr>   
    <tr onclick="fncChgBgColor(this,'CLICK')" onMouseover="fncChgBgColor(this,'OVER')" onMouseout="fncChgBgColor(this,'OUT')">  
        <td>3</td><td>秋田</td>
    </tr>   
    <tr onclick="fncChgBgColor(this,'CLICK')" onMouseover="fncChgBgColor(this,'OVER')" onMouseout="fncChgBgColor(this,'OUT')">  
        <td>4</td><td>福島</td>
    </tr>   
    <tr onclick="fncChgBgColor(this,'CLICK')" onMouseover="fncChgBgColor(this,'OVER')" onMouseout="fncChgBgColor(this,'OUT')">  
        <td>5</td><td>宮城</td>
    </tr>   
</table>
</body>
</html>

以前コンテンツ:【Javascript】div,tableを利用したサイドメニュー



Copyright(c) 2007-2020 dojeun.com All Rights Reserved.

Valid XHTML 1.0 Transitional