jQuery实例之五：class的操作

最新推荐文章于 2023-06-15 17:51:23 发布

夜光寒

最新推荐文章于 2023-06-15 17:51:23 发布

阅读量637

点赞数

分类专栏： AJAX JavaScript 文章标签： class jquery function table xhtml button

JavaScript 同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

AJAX

14 篇文章 0 订阅

订阅专栏

下面的实例是建立一个表格，对class进行动态操作效果如图所示：

<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>表格</title>
   <script src="jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(document).ready(function(){
     $("#table tr").mouseover(function(){
      $(this).addClass("over");
     });
     $("#table tr").mouseout(function(){
      $(this).removeClass("over");
     });
    
     $("#table tr:even").addClass("double");
    });
	
	function removeEvenTdClass()
	{
		 $("#table tr:even").removeClass();
	}
   </script>
   <style type="text/css">
		th{
		background: gray;
		color: white;
		}

		table{
		width: 30em;
		height: 10em;
		}

		td {
			border-bottom:1px solid #95bce2;
			text-align:center;
		}

		tr.over td{		
		font-weight: bold;
		}

		tr.double td{
		background: #DAF3F1;
		}
   </style>
</head>

<body>
   <table id="table" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>籍贯</th>
     <th>手机</th>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
    <tr>
     <td>nlcold</td>
     <td>33</td>
     <td>湖南</td>
     <td>15988888888</td>
    </tr>
   </table> 
   <input  id="btnRemoveClass" name="btnRemoveClass" type="button" value="removeEvenTdClass" οnclick="removeEvenTdClass()"/>
</body>
</html>

夜光寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实例之五：class的操作

下面的实例是建立一个表格，对class进行动态操作效果如图所示：表格 $(document).ready(function(){ $("#table tr").mouseover(function(){ $(this).addClass("over"); }); $("#table
复制链接

扫一扫

专栏目录