Jquery之table中根据行选中,进行背景变色和radio选中-创新互联

实现功能:点击列表中的某一行,然后当前行会变成其他颜色,并且其中的radio会被选中。

创新新互联,凭借十载的成都网站建设、网站建设经验,本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上千多家案例。做网站建设,选成都创新互联
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>




Insert title here


$(document).ready(function(){
	$("tbody>tr").click(function(){
		$(this)
		    .addClass('sel')
		    .siblings().removeClass('sel');
		    .end()
		    .find(':radio').attr('checked',true);
	});
})


.sel{
  background: red;
}



 
  
    
	     
	     
    
    
       
       
       
    
  
选择
姓名
张三
李四
王五

学习之初对于end的用法不太了解,我把自己理解说下,欢迎指教。

END()用法在官方文档的说明回到最近的一个"破坏性"操作之前。即将匹配的元素列表变为前一次的状态。相信不少人并没有理解它的用法。

举个简单例子

Hello,how are you?

jQuery 代码:

$("p").find("span").end()

其返回的值为:

Hello how are you?

 ]

其实就是:查找P标签中的标签,接着使用END()方法结束对P标签的引用,此时返回的是P标签(JQuery)对象

就如第一个例子如果我采用end()用法,那么写法就是


$(document).ready(function(){
	$("tbody>tr").click(function(){
		$(this)
		    .addClass('sel')
		    .siblings().removeClass('sel');
		$(this).find(':radio').attr('checked',true);
	});
})

如果初始化的时候有表格被选中,则需要处理,代码如下:

$("table :radio:checked").parent().parent().addClass('sel');

或者

$("table :radio:checked").parents("tr").addClass('sel');

或者

$('tbody>tr:has(:checked)').addClass('sel');

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:Jquery之table中根据行选中,进行背景变色和radio选中-创新互联
浏览路径:http://ybzwz.com/article/idcdc.html