jQuery学习心得----鼠标经过时改变table行的背景色

原创 2016年08月30日 11:33:36

学习了jQuery选择器,下面给大家一个关于选择器的例子,注释很详细,大家可以自己体会。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入jQuery,因为举例,所以直接网上引一个,一般可以去官网下一个jQuery包-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <title>Title</title>
</head>
<body>
<style type="text/css">
    .tr1{background-color: #FF9933;}
</style>
<script language="JavaScript">
    $(function(){
        //$("#tb tr")--选择id为tb的table,再选择该table的行tr
        // mouseover--鼠标放上去的事件(悬停)
        //$("#tb tr").mouseover();--给tb的行tr添加鼠标悬停事件
        $("#tb tr").mouseover(function(){
            $(this).addClass("tr1");//添加样式tr1,$(this)表示当前选择的元素。
        });
        // mouseout--鼠标离开的事件
        $("#tb tr").mouseout(function(){
            $(this).removeClass("tr1");//去掉样式tr1
        });
    });
</script>
<table border="2" align="center" id="tb">
    <tbody>
    <tr height="40">
        <td align="center" colspan="3">商品表</td>
    </tr>
    <tr height="40">
        <td ></td>
        <td >商品编号</td>
        <td >价格(元)</td>
    </tr>
    <tr height="40">
        <td >A商场</td>
        <td >pp02333</td>
        <td >234</td>
    </tr>
    <tr height="40">
        <td >B商场</td>
        <td >pp56333</td>
        <td >231</td>
    </tr>
    <tr height="40">
        <td >C商场</td>
        <td >pp97833</td>
        <td >541</td>
    </tr>
    </tbody>
</table>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

JQuery实现table隔行变色及鼠标滑动变色

1.实例: jquey实现表格隔行变色及鼠标滑过变色.html $(function(){ //添加tr基数背景色样式 ...
  • Hchengbowen
  • Hchengbowen
  • 2016年09月22日 21:09
  • 533

jQuery实现table隔行换色和鼠标经过变色

jQuery实现table隔行换色和鼠标经过变色 一、隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("bac...
  • itmyhome
  • itmyhome
  • 2014年06月14日 22:33
  • 4638

HTML中实现鼠标经停整行(tr)变色

在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候,要整行的背景颜色发生变化,以表明该行正中焦点,网上有一大堆这方面的代码,但是好多都还要加上一大堆得javascript代码,本人再次...
  • ljgllxyz
  • ljgllxyz
  • 2012年08月17日 10:38
  • 10841

鼠标浮动到表格的某行 背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]

之前一直觉得很难,今天用到了 好像超级简单 标题一 标题二 第一行一列 第二行第二列 第二行第一列 ...
  • a5534789
  • a5534789
  • 2014年12月24日 21:24
  • 1448

table中tr背景色高亮显示动态设置

选中其中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。取消选中复选框时,所在行的背景色恢复。界面显示效果如图-1所示 员工信息 div{ width:70%;...
  • wangqing84411433
  • wangqing84411433
  • 2017年04月27日 21:54
  • 1868

js 当鼠标移动到表格一行上时,该行背景颜色改变

1. js,当鼠标移动到表格一行上时,该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i...
  • xyr05288
  • xyr05288
  • 2015年05月08日 15:07
  • 3890

【HTML】—鼠标移入或移出表格,表格变色

本文积累了几种鼠标移入或者移出html的table表格时,表格背景色变化的几种方法。 一、利用样式CSS表达式 在样式里写表达式expression,实现鼠标经过表格行上变色,但在fire...
  • u013034793
  • u013034793
  • 2017年11月18日 21:35
  • 197

JQUERY方法给TABLE动态增加 删除行

比如设置table的id为tab var trHTML = "..." $("#tab").append(trHTML);//在table最后面添加一行 $("#tab tr:eq(2)").afte...
  • xyr05288
  • xyr05288
  • 2015年06月08日 16:20
  • 4125

用Bootstrap创建表格,并初始化一行背景色

初始化加载数据,并默认添加一行背景色 代码如下: $(document).ready(function(){ singleIf...
  • u011498933
  • u011498933
  • 2017年04月18日 14:56
  • 3425

jquery实现table动态添加行、删除行以及行的上移和下移

jQuery实现table动态添加行、删除行以及行的上移和下移
  • ZJDWHD
  • ZJDWHD
  • 2017年01月05日 16:40
  • 1637
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery学习心得----鼠标经过时改变table行的背景色
举报原因:
原因补充:

(最多只允许输入30个字)