jquery实现控制表格行高亮详解编程语言

jquery实现控制表格行高亮详解编程语言

<style> 
.height{ 
  background:#666666;   /*背景颜色为灰色*/ 
} 
tr{ 
	cursor: pointer;    /*手形*/   
} 
</style>

 

<body> 
<table border="1" width="40%"> 
   <tr><th></th><th align="left">姓名</th><th align="left">性别</th><th align="left">居住地</th></tr> 
   <tr> 
        <td><input type="radio" name="radio" /></td><td>张三</td><td>男</td><td>北京</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>李四</td><td>男</td><td>上海</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>王五</td><td>女</td><td>深圳</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>赵六</td><td>女</td><td>北京</td> 
   </tr> 
    <tr> 
        <td><input type="radio" name="radio" /></td><td>孙七</td><td>男</td><td>上海</td> 
   </tr> 
</table> 
</body>

jquery

$(document).ready(function(){ 
	   //第一种写法: $("tr:gt(0)")   第一行标题不起作用  
	   $("tr:gt(0)").click(function(){ 
			  $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true); 
	   }) 
	    
	   //第二种写法:$("tr:not(:first)") 
	   /*$("tr:not(:first)").click(function(){ 
			  $(this).addClass("height").siblings().removeClass("height").end().find(":radio").attr("checked",true); 
	   })*/ 
})

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/14455.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论