Home >Web Front-end >JS Tutorial >Detailed explanation of jQuery implementation to obtain the row number and column number of the mouse click position in the table

Detailed explanation of jQuery implementation to obtain the row number and column number of the mouse click position in the table

小云云Original: 2017-12-27 09:14:463189browse

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

Let’s take a look at the running effect first:

##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:

checkbox implements click events to trigger span element content changes

AngularJS’s ng-click parameter passing method

Jquery binds newly inserted nodes Solution to invalid Click event

The above is the detailed content of Detailed explanation of jQuery implementation to obtain 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

Previous article：The specific use of Promise in jQueryNext article：The specific use of Promise in jQuery

See more

Detailed explanation of jQuery implementation to obtain the row number and column number of the mouse click position in the table

Related articles