jquery点击tr整行选中

Relievedsir

于 2021-03-08 15:55:13 发布

阅读量484

点赞数

分类专栏： javascript css 文章标签： jquery js html css

本文链接：https://blog.csdn.net/Relievedsir/article/details/114534743

版权

javascript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSS和jQuery来实现HTML表格中行点击时的高亮选中效果。当点击表格的某一单元格时，该行及第一列的复选框状态将改变，并相应地应用或移除背景颜色。点击事件处理通过检查复选框的状态来切换选中状态。

摘要由CSDN通过智能技术生成

css:

	table,table tr th, table tr td { border:1px solid #0094ff; }
    table { width: 500px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
    .yanse{
        	background-color: #848484;
        	 -webkit-transition-property: background-color;
   			 -webkit-transition-duration: 0.5s;
   			 -webkit-transition-timing-function: ease;
        }

html:

<table class="qwe">
				<thead>
					<tr>
						<th><input type="checkbox" value="1"/></th>
						<th>编号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
					</tr>
				</thead>
				<tbody class="asd">
					<tr>
						<td><input type="checkbox" value="2"/></td>
						<td>1</td>
						<td>孙志超</td>
						<td>男</td>
						<td>23</td>
					</tr>
					<tr>
						<td><input type="checkbox" value="3"/></td>
						<td>1</td>
						<td>孙志超</td>
						<td>男</td>
						<td>23</td>
					</tr>
					<tr>
						<td><input type="checkbox" value="4"/></td>
						<td>1</td>
						<td>孙志超</td>
						<td>男</td>
						<td>23</td>
					</tr>
					<tr>
						<td><input type="checkbox" value="5"/></td>
						<td>1</td>
						<td>孙志超</td>
						<td>男</td>
						<td>23</td>
					</tr>
					<tr>
						<td><input type="checkbox" value="6"/></td>
						<td>1</td>
						<td>孙志超</td>
						<td>男</td>
						<td>23</td>
					</tr>
				</tbody>
		</table>

jquery:

	$(function(){
			$(".qwe .asd td").click(function(){
				var che=$(this).parent().children(":first").children();
			 	if(che.is(':checked')){
			 		if($(this).parent().children(":first").css('background-color') == 'rgb(132, 132, 132)'){
			 			var parent =che.prop("checked", false); 
			 			$(this).parent().children(":first").siblings().removeClass('yanse'); 
			 			$(this).parent().children(":first").removeClass('yanse'); 
			 		}else{
			 			var parent =che.prop("checked", true); 
			 			$(this).parent().children(":first").siblings().addClass('yanse'); 
			 			$(this).parent().children(":first").addClass('yanse'); 
			 		}
			 	}else{
			 		if($(this).parent().children(":first").css('background-color') == 'rgb(132, 132, 132)'){
			 			var parent =che.prop("checked", false); 
			 			$(this).parent().children(":first").siblings().removeClass('yanse'); 
			 			$(this).parent().children(":first").removeClass('yanse'); 
			 		}else{
			 			var parent =che.prop("checked", true); 
			 			$(this).parent().children(":first").siblings().addClass('yanse'); 
			 			$(this).parent().children(":first").addClass('yanse'); 
			 		}
			 	}	
			});
		});