Rumah > hujung hadapan web > tutorial js > 详解jQuery实现获取table中鼠标click点击位置行号与列号

详解jQuery实现获取table中鼠标click点击位置行号与列号

小云云
Lepaskan: 2017-12-27 09:14:46
asal
3244 orang telah melayarinya

本文主要介绍了jQuery实现获取table中鼠标click点击位置行号与列号的方法,涉及jQuery事件响应及针对table表格元素相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

先来看看运行效果:

具体代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!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>

Salin selepas log masuk

相关推荐:

checkbox实现click事件触发span元素内容改变

AngularJS的ng-click传参的方法

Jquery对新插入的节点 绑定Click事件失效的解决方法

Atas ialah kandungan terperinci 详解jQuery实现获取table中鼠标click点击位置行号与列号. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan