jquery 如何控制表格(table)标签隔行变色和鼠标滑过行变色呢?


摘要:
下文讲述jquery技巧-对table表格控制隔行变色的方法分享,如下所示;

 实现思路:
      1.使用jquery遍历跨行选择表格,然后附加上相应的背景颜色
        使其出现交替颜色
      2.为表格每行都绑定hover函数,使鼠标经过时,
      背景颜色发生相应的变化

例:

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"
 ></script>

<meta charset='utf-8' />
 <p>
maomao365.com <br />
jquery使鼠标放在相应行上发生颜色变化
</p>
<hr />


<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tb">
<tr>
    <th>表头</th>
    <th>表头</th>
    <th>表头</th>
    <th> </th>
  </tr>
  <tr>
    <td>1</td>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>


 
<script>

$(function(){
    $("#tb tr:even td").css("background","#ccc");
    $("#tb tr:even td").attr("bg","#ccc");
    $("#tb tr:odd td").attr("bg","#fff");
    $("#tb tr td").hover(function(){
        $(this).parent().find("td").css("background","green")
        },function(){
            var bgc = $(this).attr("bg");
            $(this).parent().find("td").css("background",bgc)
            });
       });
</script>
jquery控制表格隔行变色及滑动变色的示例分享

jquery控制表格隔行变色及滑动变色的示例分享