当td没有任何标示时,在jQuery中实现获取其在表格中的行和列:

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type " content = " text/html; charset=gb2312 " / >
< script language = " javascript " type = " text/javascript " src = " jquery-1.4.4.js " >< / script>
< script language = " javascript " >
    $(document).ready(
function (){
        $(
" #MyTable " ).find( " td " ).hover( function (){
           
var hang = $( this ).parent().prevAll().length + 1 ;
           
var lie = $( this ).prevAll().length + 1 ;
            $(
" :input " ).val( " " + hang + " 行,第 " + lie + " " );
        })
    })
< / script>
< title > JQuery < / title>
< style type = " text/css " >
    table{
        background:#FFCC99;}
    td{
        text
- align:center;
        width:100px;
        height:30px;}
< / style>
< / head>
< body >
< table id = " MyTable " border = " 1 " cellpadding = " 2 " cellspacing = " 0 " >
   
< tr >
       
< td > ( 1 1 ) < / td>
        < td > ( 1 2 ) < / td>
        < td > ( 1 3 ) < / td>
    < / tr>
    < tr >
       
< td > ( 2 1 ) < / td>
        < td > ( 2 2 ) < / td>
        < td > ( 2 3 ) < / td>
    < / tr>
    < tr >
       
< td > ( 3 1 ) < / td>
        < td > ( 3 2 ) < / td>
        < td > ( 3 3 ) < / td>
    < / tr>
< / table>
< br / >
< input type = " text "   / >
< / body>
< / html>

其中所用到了prevAll,其含义是查找当前元素之前所有的同辈元素。如图所示:

 

 

http://www.cnblogs.com/chenyt/archive/2011/01/25/1944633.html

目录
相关文章
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
48 0
|
11月前
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
52 0
|
12月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
57 0
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
164 0
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
47 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
350 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
300 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
553 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
276 0
【jquery ajax】实现文件上传提交
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
148 0