zoukankan      html  css  js  c++  java
  • Jquery获取当前元素所在表格的行列数

    html代码如下:

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5
    6 <script type="text/javascript" src="javsscript/jquery-1.7.1.js"></script>
    7
    8 <script type="text/javascript" language="javascript">
    9 $(document).ready(function() {
    10 $("#MyTable").find("td").hover(function() {
    11 var hang = $(this).parent().prevAll().length + 1;
    12 var lie = $(this).prevAll().length + 1;
    13 $(":input").val("" + hang + "行,第" + lie + "");
    14 })
    15 })
    16 </script>
    17
    18 <title>JQuery</title>
    19 <style type="text/css">
    20 table
    21 {
    22 background: #FFCC99;
    23 }
    24 td
    25 {
    26 text-align: center;
    27 width: 100px;
    28 height: 30px;
    29 }
    30 </style>
    31 </head>
    32 <body>
    33 <table id="MyTable" border="1" cellpadding="2" cellspacing="0">
    34 <tr>
    35 <td>
    36 (1,1)
    37 </td>
    38 <td>
    39 (1,2)
    40 </td>
    41 <td>
    42 (1,3)
    43 </td>
    44 </tr>
    45 <tr>
    46 <td>
    47 (2,1)
    48 </td>
    49 <td>
    50 (2,2)
    51 </td>
    52 <td>
    53 (2,3)
    54 </td>
    55 </tr>
    56 <tr>
    57 <td>
    58 (3,1)
    59 </td>
    60 <td>
    61 (3,2)
    62 </td>
    63 <td>
    64 (3,3)
    65 </td>
    66 </tr>
    67 </table>
    68 <br />
    69 <input type="text" />
    70 </body>
    71 </html>

    效果图:

  • 相关阅读:
    相关书籍下载2
    神奇的null和undefined
    相关书籍下载1
    微信小程序之for循环
    渐变(Gradients)
    模拟今日头条顶部导航菜单
    网格布局之相关特性
    网格布局之合并单元格
    网格布局
    Linux常用命令
  • 原文地址:https://www.cnblogs.com/zcttxs/p/2423677.html
Copyright © 2011-2022 走看看