Jquery之table中根据行选中,进行背景变色和radio选中

发布时间:2020-07-08 22:46:12 作者:相依灬為命
来源:网络 阅读:2370

实现功能:点击列表中的某一行,然后当前行会变成其他颜色,并且其中的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;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("tbody>tr").click(function(){
		$(this)
		    .addClass('sel')
		    .siblings().removeClass('sel');
		    .end()
		    .find(':radio').attr('checked',true);
	});
})
</script>
<style type="text/css">
.sel{
  background: red;
}
</style>
</head>
<body>
 
  <table>
    <thead>
	     <tr><th>选择</th></tr>
	     <tr><th>姓名</th></tr>
    <thead>
    <tbody>
       <tr><td><input type="radio" name="fruit"></td><td>张三</td></tr>
       <tr><td><input type="radio" name="fruit"></td><td>李四</td></tr>
       <tr><td><input type="radio" name="fruit"></td><td>王五</td></tr>
    </tbody>
  </table>
</body>
</html>

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

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

举个简单例子

<p><span>Hello</span>,how are you?</p>

jQuery 代码:

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

其返回的值为:

[ <p><span>Hello</span> how are you?</p> ]

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

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

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

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

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

或者

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

或者

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

推荐阅读:
  1. radio根据name 获取选中值及判断是否被选中
  2. 选中多行radio中一行传到后台

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery title ue

上一篇:自定义view之HPEditText

下一篇:sass環境搭建

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》