jquery实现表格隔行换色、锁定单元行、荧光棒、全选反选特效_excle中选择奇数行后如何反选偶数行-CSDN博客

本文链接：https://blog.csdn.net/fisea/article/details/5638639

<script type="text/javascript">
$(function(){
	$("table tr:even").addClass("tdOdd");
	$("th:first").css("background","#B4C6C1");//首个
	$("table tr").mouseover(function(){
	$(this).addClass("tdOver");}).mouseout(function(){
		$(this).removeClass("tdOver");}).click(function(){//荧光棒
			$(".tdClick").removeClass("tdClick");$(this).addClass("tdClick");
		})//行锁定  
	$("input:checkbox:first").click(function(){
		$("input:checkbox:not(input:checkbox:first)").each(function(){//剔除本身
			$(this).attr(  "checked",$("input:checkbox:first").attr("checked"));
		})  
	})  
	$("input:checkbox:not(input:checkbox:first)").click(function(){
		var flag=true;  
		$("input:checkbox:not(input:checkbox:first)").each(function(){
			if(!this.checked){flag=false;}//不可使用if($(this).attr("checked","false")){flag=false;}
		});
		$("input:checkbox:first").attr("checked",flag);
	})  
  });
  </script>
  <style type="text/css">
  body{
  font-size:12px;
  color:#366;
  }
  table{
  border:none;
  background:#fefefe;
  width:100%;
  border-collapse:collapse;
  }
  th{
  background:#CFDEC6;
  padding:4px;
  color:#000;
  }
  td,.tdNormal{
  border:#cfdec6   solid   1px;
  padding:4px;
  background:fefefe;
  }
  .tdOdd{
  background:#f1fefa;
  }
  .tdOver{
  background:#F5FAF7;
  }
  </style>
 
  <body>
  <table>
  <tr>
	  <th>姓名</th>
	  <th>年龄</th>
	  <th>专业</th>
  </tr>
  <tr>
	  <td>王洪剑</td>
	  <td>22</td>
	  <td>电气自动化</td>
  </tr>
  <tr>
	  <td>李川川</td>
	  <td>20</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>陈超</td>
	  <td>22</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>秦玉龙</td>
	  <td>21</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>刘威</td>
	  <td>21</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>张会会</td>
	  <td>21</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>胡海生</td>
	  <td>30</td>
	  <td>计算机</td>
  </tr>
  <tr>
	  <td>吴雄</td>
	  <td>22</td>
	  <td>计算机</td>
  </tr>
</table>
</body>