如何判断鼠标单击的单元格相对于单元格所在行的索引值

本文介绍如何使用cellIndex和rowIndex属性来确定鼠标点击的单元格在其所在行及表格中的确切位置,通过实例演示如何实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  如何判断鼠标单击的单元格相对于单元格所在行的索引值
解决思路:
       利用单元格的cellIndex属性即可实现
具体步骤:

代码示例:
<table width="200" height="30" border="1">
  <tr>
    <td onClick="alert(this.cellIndex)">demo</td>
    <td onClick="alert(this.cellIndex)">demo</td>
    <td onClick="alert(this.cellIndex)">demo</td>
  </tr>
</table>

注意:cellIndex返回的是以0开始的索引值,例如第一个单元格返回0,第二个单元格则为1,以此类推。
提示:要取得当前行相对于表格的索引值用rowIndex。
技巧:用rowIndex取得单元格所在行在表格中的索引值,cellIndex取得单元格在所在行的索引值,有了这两个数据就可以知道单元格的位置是第几行第几列了。
试一试:写个在单元格上单击时获取到该单元格的所在行和列。
特别提示
代码运行后,单击第二个单元格,将弹出警告框,内容为 1,效果如图 1.2.36所示。

图 1.2.36 单击单元格时提示该单元格相对于所在行的索引值
特别说明

本例用到了单元格的 cellIndex属性,附带介绍了表格行的 rowIndex属性,跟这两个属性相关的集合有rows和cells。
cellIndex获取对象于所在行的 cells 集合中的位置。
rowIndex获取对象在表格的 rows 集合中的位置。
cells 获取表格行或整个表格中所有单元格的集合。
rows 获取来自于 table 对象的 tr (表格行)对象的集合。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lzhdim

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值