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

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

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

上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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中任意部分,选中此条记录。

posted @   leagueandlegends  阅读(2348)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示