马丁传奇

导航

列表中被点击的行加亮背景色 

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>列表中被点击的行加高亮背景色</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />        
    <script type="text/javascript" src="../jquery-1.8.2.js"></script>
    <script type="text/javascript">
    //点击某行后，高亮点中行的样式
    function heightBrightTR(thisObj){        
       var thisTD = $(thisObj).parent();    //<a> 链接所在上层单元格td对象
        var thisTR = thisTD.parent();        //<a> 链接所在上层行tr对象    
        thisTR.addClass('trBgStyle');                    //添加背景高亮色
        thisTR.siblings('tr').removeClass('trBgStyle'); //将同级同胞的背景色置空
    }
    </script>
    <style type="text/css">
     .trBgStyle{background:#ffff66;}   /* 用于点击后改变行背景色 */
    </style>
</head>
<body>
    <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <th>id号</th>
            <th>链接地址</th>
        </tr>
        <tr>
            <td>2</td>
            <td><a onclick="heightBrightTR(this)" target="_blank" href="http://www.google.com.hk">Google</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td><a onclick="heightBrightTR(this)" target="_blank" href="http://www.baidu.com">百度</a></td>
        </tr> 
        <tr>
            <td>4</td>
            <td><a onclick="heightBrightTR(this)" target="_blank" href="http://cn.msn.com">MSN中文网</a></td>
        </tr>       
    </table>




</body>
</html>

 

posted on 2013-09-04 21:53  马丁传奇  阅读(784)  评论(0)    收藏  举报