博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

常用jquery选择器示例集合---find()--2021/03/02--0.0.1

Posted on 2021-03-02 21:49  海绵谷  阅读(97)  评论(0)  编辑  收藏  举报
  • 使用自定义的属性级联子类的name,例如一个表格，每一列的name属性相同，tr标签里有自定义行序号，现在要求根据行序号+name属性为单元格设置红色背景并且清除背景
//清除
$(".myrow[hxh='"+i+"']").find("input").css({"background-color":""});
//设置
$(".myrow[hxh='"+i+"']").find("input[name='c']").css({"background-color":"yellow"});

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 条纹表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){
		  $("#tets").click(function(){
			  for(var i=1;i<4;i++){
				  $(".nrow[hxh='"+i+"']").find("input[name='b']").css({"background-color":"red"});
			  }
		  });
		 $("#tets1").click(function(){
			  for(var i=1;i<4;i++){
				  $(".nrow[hxh='"+i+"']").find("input[name='c']").css({"background-color":"yellow"});
			  }
		  });
		 $("#tets2").click(function(){
			  for(var i=1;i<4;i++){
				  $(".nrow[hxh='"+i+"']").find("input[name='d']").css({"background-color":"green"});
			  }
		  });
		$("#tets3").click(function(){
			  for(var i=1;i<4;i++){
				  $(".nrow[hxh='"+i+"']").find("input").css({"background-color":""});
			  }
		  });
	});
	</script>
</head>
<body>

<table class="table table-striped">
	<caption>条纹表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr hxh="1" class="nrow">
			<td>
			<input type="text" name="b" />
			</td>
			<td>
			<input type="text" name="c" />
			</td>
			<td>
			<input type="text" name="d" />
			</td>
		</tr>
		<tr hxh="2" class="nrow">
			<td>
			<input type="text" name="b" />
			</td>
			<td>
			<input type="text" name="c" />
			</td>
			<td>
			<input type="text" name="d" />
			</td>
		</tr>
		<tr hxh="3" class="nrow">
			<td>
			<input type="text" name="b" />
			</td>
			<td>
			<input type="text" name="c" /></td>
			<td>
			<input type="text" name="d" />
			</td>
		</tr>
	</tbody>
</table>
	<button class="default-button" id="tets">测试</button>
	<button class="default-button" id="tets1">测试1</button>
	<button class="default-button" id="tets2">测试2</button>
	<button class="default-button" id="tets3">测试3</button>

</body>
</html>