DOJEUN's Notepad
 LISTへ 

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

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

<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>