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

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

<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】分かりやすくラインを選択する

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