A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 罗代势 中级黑马   /  2012-11-10 23:06  /  1696 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 罗代势 于 2012-11-24 13:59 编辑

    <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
    <style type="text/css">
    .bgc1{background-color:Yellow}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#tab1 tr").css("cursor", "pointer").mouseover(function(){
            $(this).css("background","white").siblings().css("background","blue");
            }).click(function() {
                $(this).toggleClass("bgc1").siblings().removeClass("bgc1");
            });
        });
    </script>
</head>
<body>
<table id="tab1">
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</table>
</body>

我想实现点击移动到的某个行是黄色,没有点击的行还是蓝色!!但是上面的代码不能实现,为什么呢??帮帮忙!!!谢谢!!

评分

参与人数 1技术分 +1 收起 理由
张文 + 1

查看全部评分

3 个回复

倒序浏览
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>点击改变背景色</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            $("#table1 tr").click(function () {

                $(this).css("background", "yellow").siblings().css("background","green");

            })

        })
   
    </script>
</head>
<body>
<table id="table1">
    <tr><td>第一行</td></tr>
    <tr><td>第二行</td></tr>
    <tr><td>第三行</td></tr>
    <tr><td>第四行</td></tr>
</table>

</body>
</html>



vs2010上调试成功, 点击某一行 背景颜色变为黄色,其余行变为 绿色 你参考一下吧  

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

回复 使用道具 举报
我用javascript也来写一个一样的功能,请大家多多指教

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #table1 tr{background-color : green}
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //获得table元素
            var table = document.getElementById("table1");
            //获得table下的tr元素
            var trs = table.getElementsByTagName("tr");
            //循环每个tr
            for (var i = 0; i < trs.length; i++) {
                var tr = trs[i];
                //将鼠标变为手的图标
                tr.style.cursor = "pointer";
                //为每个tr动态的添加onclick事件
                tr.onclick = function () {//onclick事件的处理函数
                    var table = document.getElementById("table1");
                    var trs = table.getElementsByTagName("tr");
                    for (var i = 0; i < trs.length; i++) {
                        var tr = trs[i];
                        //若某一个tr等于当前发生事件的控件就将其的背景色设为黄色;若不是就将其
                        //设为绿色
                        if (tr == this) {
                            tr.style.background = "yellow";
                        }
                        else {
                            tr.style.background = "green";
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<!--
     点击某一行 背景颜色变为黄色,其余行变为 绿色
-->
<table id="table1">
    <tr><td>tom</td></tr>
    <tr><td>jim</td></tr>
    <tr><td>lucy</td></tr>
    <tr><td>lily</td></tr>
</table>
</body>
</html>

评分

参与人数 1技术分 +1 收起 理由
张文 + 1

查看全部评分

回复 使用道具 举报
http://www.itcodes.cn/132.html
可以看看。顺便打个广告。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马