How to get the row number and column number of the mouse click position in the table-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to get the row number and column number of the mouse click position in the table

小云云

Jan 26, 2018 am 09:22 AM

tableClickmouse

How to get the row number and column number of the mouse click position in the table? This article mainly introduces jQuery's method of obtaining the row number and column number of the mouse click position in the table, involving jQuery event response and related operation skills for table elements. Friends who need it can refer to it. I hope it can help everyone.

The specific code is as follows:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.jb51.net 鼠标点击位置行列号</title>
</head>
<body>
<table class="mytable" border=1>
  <tr> 
   <th style="width: 160px;">表头一</th> 
   <th style="width: 160px;">表头二 </th> 
   <th style="width: 160px;">表头三</th> 
   <th style="width: 160px;">表头四</th> 
   <th style="width: 160px;">表头五</th> 
  </tr> 
  <tr> 
   <td>第一行第一列</td> 
   <td>第一行第二列</td> 
   <td>第一行第三列</td> 
   <td>第一行第四列</td> 
   <td>第一行第五列</td> 
  </tr> 
  <tr> 
   <td>第二行第一列</td> 
   <td>第二行第二列</td> 
   <td>第二行第三列</td> 
   <td>第二行第四列</td> 
   <td>第二行第五列</td> 
  </tr> 
  <tr> 
   <td>第三行第一列</td> 
   <td>第三行第二列</td> 
   <td>第三行第三列</td> 
   <td>第三行第四列</td> 
   <td>第三行第五列</td> 
  </tr> 
  <tr> 
   <td>第四行第一列</td> 
   <td>第四行第二列</td> 
   <td>第四行第三列</td> 
   <td>第四行第四列</td> 
   <td>第四行第五列</td> 
  </tr> 
</table>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
    $(".mytable td").click(function(){
      var tdSeq = $(this).parent().find("td").index($(this)[0]);
      var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]);
      alert("第" + (trSeq + 1) + "行，第" + (tdSeq + 1) + "列");
    });
})
</script>
</body>
</html>

Related recommendations:

Detailed explanation of jQuery getting the value of a certain column of Table

How to get the value of a certain column in the table using JavaScript

Js code to get the value of the current tr row of the table_javascript skills

The above is the detailed content of How to get the row number and column number of the mouse click position in the table. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

m590鼠标USB连接上用不了怎么办Mar 09, 2023 pm 03:18 PM

m590鼠标USB连接上用不了的解决办法：1、查看蓝牙设备，看是否识别为罗技优联连接器，然后下载Logitech Unifying优联软件，运行该软件；2、删除蓝牙设备，再添加蓝牙设备，重新连接m590即可。

在iPhone iOS 17上如何设置多个计时器Sep 18, 2023 am 09:01 AM

在iOS17中，您可以使用时钟应用程序在iPhone上设置多个计时器，或使用Siri免提设置。我们在本文中讨论了两者。让我们来看看它们。使用时钟应用程序在iPhone上设置多个计时器打开iPhone上的时钟应用程序，然后点击右下角的计时器选项卡。现在，设置小时、分钟和秒。您可以使用“标签”和“计时器何时结束”选项来设置计时器的名称以及计时器完成时的首选音调。这将帮助您区分计时器。完成后，点击“开始”按钮。然后，点击右上角的“+”图标。现在，重复上述步骤以在iPhone上设置多个计时器。您还可以浏

mac鼠标滚轮相反怎么办Mar 16, 2023 pm 05:44 PM

mac鼠标滚轮相反的解决办法：1、打开mac电脑，点击屏幕的苹果标志，然后选择“系统偏好设置”；2、在“系统偏好设置”窗口中，选择“鼠标”；3、在“鼠标”窗口中，将“滚动方向：自然”前面的勾去掉即可。

电脑鼠标能动但点什么都没反应怎么办Jul 06, 2023 pm 02:23 PM

电脑鼠标能动但点什么都没反应解决方法：1、检查鼠标连接，确认鼠标连接到电脑的USB接口上；2、重启电脑，断开鼠标连接，然后重新启动电脑并重新连接鼠标；3、更换鼠标电池或充电，如果使用的是无线鼠标，可能是因为鼠标电池电量低了，导致无法正常工作。

Win10鼠标dpi怎么调？Win10系统调节鼠标灵敏度实例教程Jul 11, 2023 pm 03:13 PM

Win10鼠标dpi怎么调？鼠标dpi实际上简单点来说便是鼠标的敏感度。dpi值越高，鼠标灵敏度越高。许多好朋友全是应用Win10系统，要想了解如何修改鼠标dpi值，小编今日就告知各位朋友们怎么修改鼠标dpi值，期待对您有协助。Win10系统调节鼠标灵敏度实例教程1.鼠标右键点一下菜单栏，挑选设定，进到Windows设定页面，挑选开启机器设备；2.在左边的选择栏中转换到鼠标，随后在右边有关设定下挑选别的鼠标选择项;3.在鼠标特性对话框，将上边菜单栏转换到表针选择项，在下边挑选表针挪动速率来调节鼠

制作 iPhone 上 iOS 17 提醒应用程序中的购物清单的方法Sep 21, 2023 pm 06:41 PM

如何在iOS17中的iPhone上制作GroceryList在“提醒事项”应用中创建GroceryList非常简单。你只需添加一个列表，然后用你的项目填充它。该应用程序会自动将您的商品分类，您甚至可以与您的伴侣或扁平伙伴合作，列出您需要从商店购买的东西。以下是执行此操作的完整步骤：步骤1：打开iCloud提醒事项听起来很奇怪，苹果表示您需要启用来自iCloud的提醒才能在iOS17上创建GroceryList。以下是它的步骤：前往iPhone上的“设置”应用，然后点击[您的姓名]。接下来，选择i

如何在iPhone上的“通讯录”中设置我的名片 [2023]Sep 22, 2023 pm 09:17 PM

借助iOS中的“我的名片”，您可以创建个性化的联系人名片，Siri和其他服务可识别该名片，并与您和您的电话号码相关联。随着iOS17中联系人海报的引入，“我的卡片”变得非常重要，因为它现在用于创建您的联系人海报。如果您渴望启动并运行联系人海报，则必须从设置“我的名片”开始。我们将逐步介绍如何创建“我的名片”以及如何使其与Siri和您的联系人海报顺利配合使用。如何在iPhone上的“通讯录”中设置“我的名片”[2023]如果您是首次在iPhone上设置“我的名片”，则必须仅通过“通讯录”应用进行设

鼠标放在鼠标垫上为什么更灵敏Nov 14, 2022 pm 02:21 PM

因为鼠标垫能辅助定位。鼠标垫给鼠标的定位和移动提供了良好的表面支撑，相比于直接放置在一般表面上，更能强化鼠标的可用性和实用性；且鼠标垫可以有效地降低鼠标底部碎片、灰尘的聚集，从而减少鼠标使用过程中跳帧的现象，有效增强鼠标在使用时的精确性，减少各种外部因素对鼠标的影响。

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months agoByDDD

R.E.P.O. Best Graphic Settings

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks agoByDDD

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Linux new version

SublimeText3 Linux latest version

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.