首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jquery如何判断我点击的td是第一行还是最后一行,以及行索引和列索引?

JQuery提供了一些方法来判断点击的td元素所在的行和列的索引。下面是一个示例代码,演示了如何判断点击的td是第一行还是最后一行,以及获取行索引和列索引:

代码语言:javascript
复制
// 给所有的td元素绑定点击事件
$('td').click(function() {
  // 获取点击的td元素所在的行
  var row = $(this).closest('tr');
  
  // 获取点击的td元素所在的行索引
  var rowIndex = row.index();
  
  // 获取表格中所有的行
  var rows = $('tr');
  
  // 判断点击的td是第一行还是最后一行
  if (rowIndex === 0) {
    console.log('点击的是第一行');
  } else if (rowIndex === rows.length - 1) {
    console.log('点击的是最后一行');
  }
  
  // 获取点击的td元素所在的列索引
  var colIndex = $(this).index();
  
  console.log('行索引:' + rowIndex);
  console.log('列索引:' + colIndex);
});

在上述代码中,我们首先给所有的td元素绑定了点击事件。当点击任意一个td元素时,首先通过closest('tr')方法找到该td元素所在的行,然后使用index()方法获取行索引。接着,通过$('tr')选择器获取所有的行,判断行索引是否为0或者最后一行的索引值(rows.length - 1),从而确定点击的td是第一行还是最后一行。最后,使用index()方法获取点击的td元素在其所在行中的列索引。

需要注意的是,上述代码中没有提及任何特定的云计算品牌商,如腾讯云等。如果需要了解腾讯云相关产品和产品介绍,可以访问腾讯云官方网站或者咨询腾讯云的客服人员。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

与Ajax同样重要jQuery(1)

最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js jquery-1.8.3.min.js jquery-1.8.3...③:基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配元素 $("...匹配所有正在执行动画效果元素 练习3: ² 设置表格第一行,显示为红色 ² 设置表格除第一行以外 显示为蓝色 ² 设置表格奇数背景色 黄色 ² 设置表格偶数背景色 绿色 ² 设置页面中所有标题.../jquery-1.8.3.min.js"> $(function(){ // 设置表格第一行,显示为红色 $("tr:first...").css("color","red"); // 设置表格除第一行以外 显示为蓝色 // $("tr:not(:first)").css("color","blue"); $("tr:gt(0)").

10K60

jQuery基本操作

="apple"/>]  :even  //概述 //匹配所有索引值为偶数元素,从零开始 //描述 //查找表格1,3,5...(既索引值0,2,4...)...:odd //概述 //匹配所有索引值为基数元素,从零开始计数 //描述 //查找表格2,4,6(既索引值1,3,5....)...>]   :gt(index) //概述 //匹配所有大于给定索引值得元素 index //从零开始计数 描述 查找第二第三,既索引12,也就是比零打 HTML代码 list item 5]   :lt(index) //概述 //匹配所有小于给定索引值得元素 index 从零开始计数 描述 查找第一行第二,既索引1,也就是比2小·...·接收元素索引位置元素旧样式类作为参数· 2·一个用来判断样式类添加还是移除boolean值· 参数class描述 每点击三峡加上一个"highlight"类 HTML代码 <strong

7.5K20

jQuery EasyUI 详解

官网地址:http://www.jeasyui.com/index.php 文档地址: 中文文档 英文文档 快速入门 弹出对话框 demo 第一步: 下载 Jquery EasyUI 你在使用进行开发时...rowData: 记录数据。 rowIndex: 索引。 undefined sorter function 自定义字段排序函数,需要两个参数: a: 第一个字段值。 b: 第二个字段值。...onClickRow rowIndex, rowData 当用户点击一行时触发,参数包括: rowIndex:被点击索引,从 0 开始。rowData:被点击对应记录。...resize param 调整尺寸布局。 load param 加载并显示第一,如果指定 param 参数,它将替换 queryParams 特性。...getChanges type 获取最后一次提交以来更改,type 参数表示更改类型,可能:inserted、deleted、updated,等等。

9.1K10

jQuery

丰富DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格隔行变色,jQuery也是一行代码搞定...基本筛选器(选择之后进行过滤): :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index那个元素 :even // 匹配所有索引值为偶数元素,从 0...点击一行删除按钮删除当前行数据。   作业示例代码: <!...示例:     表格中每一行编辑删除按钮都能触发相应事件。回去完善一下咱们上面的那个作业吧,添加一行数据那个作业,然后我们在学习一下上面的那些绑定事件。...,你需要考虑一下如何区分新增还是编辑,新增效果添加一行,编辑效果修改之前数据。

8.9K20

day54_BOS项目_06

ajax请求,返回json数据,解析也是json数据,所以返回"none"         // 如果返回"list",就是说我们查询到结果变成HTML页面,用解析json数据方式根本解析不出来啊...(Column)属性:数据网格(DataGrid) (Column)一个数组对象,它每个元素也是一个数组。...元素数组元素一个配置对象,它定义了每个字段。 数据网格编辑功能是以列为单位。 即:通过数据网格属性editor开启指定编辑功能。如下图所示: ?...数据网格方法: 插入一行:insertRow 删除一行:deleteRow 开启编辑状态:beginEdit 结束编辑状态:endEdit 获得选中行索引:getRowIndex 获得选中第一行...0位置插入,即在第一行插入                             row:{}   // 空json表示空行                         });

2.3K20

Web前端学习笔记之jQuery基础

丰富DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格隔行变色,jQuery也是一行代码搞定...jQuery链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css代码,并且代码可读性也比js要强。 Ajax操作支持。...x后面的y $("x ~ y")// x之后所有的兄弟y 基本筛选器: :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index那个元素 :even //...empty()// 删除匹配元素集合中所有的子节点。 例子: 点击按钮在表格添加一行数据。 点击一行删除按钮删除当前行数据。...示例: 表格中每一行编辑删除按钮都能触发相应事件。

3.5K20

jquery

丰富DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格隔行变色,jQuery也是一行代码搞定...x后面的y $("x ~ y")// x之后所有的兄弟y 基本筛选器: :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index那个元素 :even //...empty()// 删除匹配元素集合中所有的子节点。 例子: 点击按钮在表格添加一行数据。 点击一行删除按钮删除当前行数据。...16 // 判断当前select这一行是否被选中 console.log($(this).parent().siblings().first().find(":checkbox...示例: 表格中每一行编辑删除按钮都能触发相应事件。

5.8K30

python测试开发django-173.bootstrap实现table表格行内编辑

想实现需求很简单,在页面上写个简单table表格,能删除,添加行,点击每一个报告能直接编辑就行,不需要那些花里胡哨功能。...最后还是自己基于bootstrap写了一个table报告在线编辑功能。...实现效果 想实现效果如下图所示: 1.点输入框能占满一格 2.最后添加删除按钮 3.可以点添加一行按钮 前端实现 基于bootstrap框架 table.../ 删除一行 $(document).on('click','.del_row', function(){ $(this).parent().parent().remove(); }); 最后提交数据...提交数据需获取table报告上输入内容,希望键值对数据,于是可以用到form表单序列化,在table外层加一个form标签。

1.3K40

JQuery 入门学习(完结)

最后一篇Jquery实际应用,以及一些平时注意到细节。最后Jquery进行总结。    ...所以大家可以看到,使用DOM中方法event.target.parentNode.style.backgroundColor,首先用parentNode获得td元素父元素tr元素(因为一行都改变颜色...每点击一个商品,我们就把这一行从表格中删除,并加到下方“购物车”框中。...看第一行,我们会发现,event.target.parentNode认识,但为什么要把它放在$()中间?     这就涉及到DOM对象转换成Jquery对象过程。...于是这里就得到了点击一行商品名价格。然后用$(event.target.parentNode).remove();把这一行移除,再用append把内容加到“购物车”里。

92910

jQuery选择器大全(48个代码片段+21幅图演示)1

选择器jQuery最基础东西,本文中列举选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器理解,它们本身用法就非常简单,更希望它能够提升个人编写jQuery...本文配合截图、代码简单概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意区分地方。 一、基本选择器 1. id选择器(指定id元素) 将id="one"元素背景色设置为黑色。...基本过滤选择器 ——1.1 :first:last(取第一个元素或最后一个元素) $(document).ready(function () { $('span:first')...所在div父子关系时,G1G2都会变色。...// 奇数颜色 }); A、C颜色#EEE(第一行索引为0),B、D颜色#DADADA ?

2K70

Mysql详细学习笔记

真正数据存在每一个表里面。字段()划分出来了一个表应该按照什么样格式存数据。而行,真正数据。每一行需要遵循数据字段(规范要求进行存入数据。...MySQL索引类型 索引类型 功能说明 普通索引 最基本索引,它没有任何限制 唯一索引一行企用了唯一索引则不准许这一行数据中有重复值。...针对这一一行数据都要求是唯一 主键索引 它是一种特殊唯一索引,不允许有空值。一般在建表时候同时创建主键索引,常用于用户ID。...表格和数据表一样。所示展示起来很方便。 先声明一个表格,每次循环时候输出一行。将结果展示到各个里面。...每次循环结果赋值给row,row中关联数组。因此在这次循环中,可以将都显示出来。

4.6K40

脚本语言知识总结.

(1)所有的变量使用var来定义,弱类型变量,不代表没有类型,变量本身还是有类型。【var a=10,var b=1.5;他们分别为整数以及浮点数类型】 (2)每行结尾分号可有可无,建议编写。...练习3: ² 设置表格第一行,显示为红色 ² 设置表格除第一行以外 显示为蓝色 ² 设置表格奇数背景色 黄色 ² 设置表格偶数背景色 绿色 ² 设置页面中所有标题 显示为灰色 ² 设置页面中正在执行动画效果.../jquery-1.8.3.min.js"> $(function(){ // 设置表格第一行,显示为红色 $("tr:...first").css("color","red"); // 设置表格除第一行以外 显示为蓝色 //$("tr:not(:first)").css("color","blue"); $("tr:gt(0...:nth-child(index/even/odd) 选取索引为index元素、索引为偶数元素、索引为奇数元素  ----- index 从1开始 区别 eq :first-child  选取第一个子元素

5K130

用vue开发一个所谓数独

比如,第一行第三进行位置交互,第一第五进行位置交换。下面说下以行为单位打乱顺序! 打乱,很简单,就是随机打乱数组而已!一行代码搞定!...3-3.打乱 打乱了,下面进行以列为单位打乱,这个稍微复杂一点。 大家想下,比如第二第五值进行交换,那就是每一行第二个格子第五个格子值进行交换,那么就需要遍历每一行!...看到这个坐标,大家很容易知道,数组一个元素,就是第一行,‘0-0’就是第一行第一个格子。数组最后一个元素,就是最后一行,‘8-8’就是最后一行最后一个格子,其他如此类推!...如上图,点击第一行第三个格子,首先,期待被点击格子样式有所改变,方便区分,这个不难,用一个class改变样式就可以了,这个可以看下面的代码,用一个.curclass控制样式。...数字键盘top就是,被点击格子所在索引+160(60格子宽高),left就是,被点击格子所在索引+160(60格子宽高)。

2.1K40

jQuery

丰富DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格隔行变色,jQuery也是一行代码搞定...jQuery链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css代码,并且代码可读性也比js要强。 Ajax操作支持。...最后一个 :eq(index)// 索引等于index那个元素 :even // 匹配所有索引值为偶数元素,从 0 开始计数 :odd // 匹配所有索引值为奇数元素,从 0 开始计数 :gt(index...补充 .first()// 获取匹配第一个元素 .last()// 获取匹配最后一个元素 .not()// 从匹配元素集合中删除与指定表达式匹配元素 .has()// 保留包含特定后代元素,去掉那些不含有指定后代元素...示例: 表格中每一行编辑删除按钮都能触发相应事件。

4.6K50
领券