JS实现点击table中任意元素选中

最新推荐文章于 2024-06-11 20:00:00 发布

转载最新推荐文章于 2024-06-11 20:00:00 发布 · 588 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/longlyseul/p/11538218.html

标签

#java #javascript #ViewUI

本文介绍了一个实用的jQuery技巧，通过简单的代码实现点击表格任意单元格时，选中整行的功能。该方法利用jQuery的事件委托，对表格中的每个非首列单元格进行监听，当点击时切换首列复选框的状态。

上项目开发，忙的焦头烂额，博客也没咋更新了。

昨天老师提了个需求，简单的小例子，选择tr中任一行选中tr，觉得很有意思，记录一下：

上代码

<!DOCTYPE html>
<html>
<head>
	<title>更新checked</title>
</head>
<script src="E:\java jar\jquery\jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).on("click","#table1 tr td:not(:first-child)",function(){
	var obj = $(this).parent().find("td:first").find("input");
    obj.prop("checked", !obj.is(":checked"));
})
</script>
<body>
<table id="table1" border="1px">
<tr id="tr1">
<td><input type="checkbox" name="stuId"></td>
<td><p id="stuName" name="stuName">StudentName</p></td>
<td><p id="stuNo" name="stuNo">StudentNo</p></td>
<td><p id="stugrade" name="stugrade">StudentNo</p></td>
</tr>
</table>
</body>
</html>

　作用就是选择tr中任意部分，选中此条记录。

转载于:https://www.cnblogs.com/longlyseul/p/11538218.html