浏览 5244 次
|
锁定老帖子 主题：jquery的使用：鼠标移过高亮显示
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-08-05
最后修改：2009-08-06
既然是要学习jquery，当然你要有javaScript的基本功才行，没有的话，还是先学习js再说， 第一步：要加入两个js的插件 （随后可以下载） <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="script/jquery-latest.pack.js"></script>
<!--StartFragment --> 第一个是js主要的插件，第二个是表格用到的插件 第二步：比较简单的一个table <body> <table align="center" width="70%" border="0" cellpadding="3" cellspacing="0" borderColor="#cccccc" bgcolor="#efefef"> <thead> <tr> <th> 姓名 </th> <th> 年龄 </th> </tr> </thead> <tr> <td> a <input type="checkbox" value="c1"> </td> <td> b </td> </tr> <tr> <td> c <input type="checkbox" value="c5"> </td> <td> d </td> </tr> <tr> <td> c <input type="checkbox" value="c4"> </td> <td> d </td> </tr> <tr> <td> c <input type="checkbox" value="c3"> </td> <td> d </td> </tr> <tr> <td> c <input type="checkbox" value="c2"> </td> <td> d </td> </tr> </table> </body> 第三步： <style type="text/css">
th {
background: #6E6E6E;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
/*td 不是必须设置的 只是为td设置一些，好看点*/
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
text-align: center;
}
tr.over td {
background: #cccccc; /*这个将是鼠标高亮行的背景色 这是必须设置的*/
}
第四步：现在是关键了 <script>
$(document).ready( function() {
//如果鼠标移表格的tr上时，执行函数 $("table tr").mouseover(function(){$(this).addClass("over")}),
//鼠标移出tr时，执行函数 $("table tr").mouseout(function(){$(this).removeClass("over")});
});
</script>
ok了， 主要是要用到插件 当然不用表格插件也可以作出这种效果 如： $(document).ready( function() {
$("table td").mouseout( function() {
$(this).parent().find("td").each(function(i){ $(this).css({color:"black",background: '#efefef' }) });
});
$("table td").mouseover( function() {
$(this).parent().find("td").each(function(i){ $(this).css({color:"red",background: '#cccccc' }) });
});
});
$("table td")：表格的所有td $(this).parent()：这个td的父元素 tr $(this).parent().find("td").each(function(i){ }):然后通过这个父元素节点找到下边的所有的子元素（所有的td） 开始循环， 没找到一个td，就执行这个函数： $(this).css({color:"black",background: '#efefef' }) 这里的this就是每一个td，然后css
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-11-20
请教一下楼主,我原来也是这么写实现高亮的,代码完全一样,但是使用了tablesorter插件的时候,我为了实现隔行换色的现实功能,在初始化tablesorter的时候设置了widgets: ['zebra'] 属性,这时候高亮的功能就失效了.
因为还是js新手,对widgets这个实现即使看了源码还是不得要领,找不到问题的原因...不知楼主有没此问题的经验呢? |
| 返回顶楼 | |
