黑马程序员技术交流社区

标题: 帮我看下下面的JQuery代码 [打印本页]

作者: 罗代势 时间: 2012-11-10 23:06
标题: 帮我看下下面的JQuery代码
本帖最后由罗代势于 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>

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

作者: 王继光 时间: 2012-11-11 16:49
<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上调试成功，点击某一行背景颜色变为黄色，其余行变为绿色你参考一下吧

作者: 陈辉 时间: 2012-11-11 18:27
我用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>

作者: 张文 时间: 2012-11-11 21:11
http://www.itcodes.cn/132.html
可以看看。顺便打个广告。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2