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

昨天老师提了个需求，简单的小例子，选择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中任意部分，选中此条记录。

JS实现点击table中任意元素选中的更多相关文章

  1. 点击table中的某一个td,获得这个tr的所有数据

    功能: 点击table中的某一个td,获得这个tr的所有数据 效果图 <html> <head> <script> function getData2(elemen ...

  2. js的传值，table中tr的遍历，js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  3. 【2017-07-03】JS连续删除table中的选中的多行数据

    deleteRow() 连续删除多行 应用:删除表格选中的一行或多行.html代码如下: <table > <tr> <td >复选框</td> < ...

  4. js创建点击事件中<a>标签onclick传递多个参数

    var rowIndex = e.rowIndex; var t = "<a href='javascript:void(0)' onclick=\"viewInfo('&q ...

  5. js穿梭框；将两个table中的数据选中移动

    将table中选中的数据移动到右边: 点击一行中的任意一个位置,使其选中: 注:attr()和prop()都是jquery的方法: .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 ...

  6. react 使用antd的在图片列表或表格中实现点击其他元素Checkbox选中功能

    antd官网上的Checkbox功能只能单独使用,在表格中加入Checkbox也只能点击Checkbox按钮才能实现选中或取消功能 如果我们要实在表格行中点击或在图片列表中点击图片就能实现选中或取消, ...

  7. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  8. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  9. 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

随机推荐

  1. ASP.NET Core SignalR 使用

    SignalR: 实时 Web 功能使服务器端代码能够即时将内容推送到客户端(包括B/S,C/S,Andriod).   SignalR最新版本为3.0(截止2020-02-28)   SignalR ...

  2. Win10下安装tensorflow详细过程

    首先声明几点: 安装tensorflow是基于Python的,并且需要从Anaconda仓库中下载. 所以我们的步骤是:先下载Anaconda,再在Anaconda中安装一个Python,(你的电脑里 ...

  3. 基于Python接口自动化测试框架(初级篇)附源码

    引言 很多人都知道,目前市场上很多自动化测试工具,比如:Jmeter,Postman,TestLink等,还有一些自动化测试平台,那为啥还要开发接口自动化测试框架呢?相同之处就不说了,先说一下工具的局 ...

  4. WPF-命令-基础知识

    命令模型的主要元素: 1.命令 2.命令绑定:命令连接到相关的应用程序逻辑 3.命令源:命令源触发命令, 4.命令目标:应用程序逻辑. -------------------------------- ...

  5. jQuery---音乐导航

    音乐导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. java - GC垃圾收集器详解（三）

    以前收集器的特点 年轻代和老年代是各自独立且连续的内存块 年轻代收集必须使用单个eden+S0+S1进行复制算法 老年代收集扫描整个老年代区域 都是以尽可能少而快速地执行GC为设计原则 G1是什么 G ...

  7. vue加载单文件使用vue-loader报错

    报错信息如下:ERROR in ./src/login.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-load ...

  8. Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）

    1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...

  9. 【vue】 vue跳转页面:router-link/this.$router.push()

    1.通过标签<router-link> <router-link to='A'>跳转到A页面</router-link> 2.通过方法 this.$router.p ...

  10. SpringBoot--application.yml

    application.properties 配置了端口号:9090 application.yml 也配置了端口号:8080 SpringBoot使用9090,以属性为主 1.在applicatio ...