在嵌套表格中查找单元格位置（行，列） [英] Finding a cells positions (row, column) in nested tables

问题描述

下面简单介绍一下jQuery，它告诉我一个表格中的单元格是否在行/列中（不包括colspans）。

  var col = $ this.index（）+ 1; 
 var row = $ this.closest（'tr'）。index（）+ 1; 
  

很简单...除了我的表格嵌套在其他表格中，我不知道偏移应该是什么。例如，我有单元格（1,1），这个单元格位于另一个表格的第二个单元格中的一个表格中......并且第一个单元格有一个三列表格。所以我的单元格是真的（4,1）。编辑：一个更完整的示例，包含更多的测试用例。我几乎已经解决了。只是一些引起问题的奇怪情况。 （现在用彩色测试）

http：// jsfiddle.net/gibble/J3uER/

...我意识到这是不正常的，而且html很愚蠢，但这正是我需要的

解决方案

http://jsfiddle.net/juSm2/

我用迭代计数器做了它。这有点复杂，但你的任务也是如此。 :)
一些html修改是必要的：我们必须标记主要行以区别嵌套行。

  $（'td'）。click（function（event）{
 event.stopPropagation（）; 
 $（this）.addClass（'clicked'）; 
 
 var row = 0; 
 $（'tr.row'）。 （$（this））.find（'。clicked'）。length）
 {
 var td = 0; 
 $（this）.find（'td'）。each（function（）{
 if（！$（this）.find（'td'）。length）
 {
 td ++ ; 
 if（$（this）.is（'。clicked'））
 {
 alert（'row ='+ row +'，td ='+ td）; 
 $（'。row .clicked'）。removeClass（）; 
} 
} 
}）; // td each 
} 
}）; // .row每个
}）; // td点击
 
< table> 
< tr class =row> 
< td> A1< / td> 
< td> B1< / td> 
 ... 
< / tr> 
< tr class =row> 
< td> A2< / td> 
< td> B2< / td> 
 ... 
< / tr> 
< / table> 
< table> 
< tr class =row> 
< td> 
< table> 
< tr> 
< td> A3< / td> 
< td> B3< / td> 
 ... 
< / tr> 
< / table> 
< / td> 
< td> 
< table> 
< tr> 
< td> F3< / td> 
< td> G3< / td> 
 ... 
< / tr> 
< / table> 
< / td> 
< / tr> 
< / table> 
  

I have the following simple bit of jQuery which tells me what row/column a cell is inside of a table (excluding colspans).

var col = $this.index() + 1;
var row = $this.closest('tr').index() + 1;

Simple enough...except, my tables are nested inside other tables, and I don't know what the offset should be. For example, I have cell (1,1), this cell is in a table, which is in the second cell of another table... And that first cell has a table with three columns. So my cell is really (4,1)

EDIT: A more complete sample, with more test cases. I've nearly got it solved. Just some strange cases that are causing issues. (now with coloured tests)

http://jsfiddle.net/gibble/J3uER/

...I realize this isn't normal, and the html is stupid, but it's what I need to work with.

解决方案

http://jsfiddle.net/juSm2/

I did it with iteration counters. It is a little bit complex, but your task too. :) And some html modifications are necessary: we have to mark main rows to differ them from nested rows. I added the class .row to reach this.

$('td').click(function (event) {
    event.stopPropagation();
    $(this).addClass('clicked');

    var row = 0;
    $('tr.row').each(function () {
        row++;
        if ( $(this).find('.clicked').length )
        {
            var td = 0;
            $(this).find('td').each(function () {
                if ( !$(this).find('td').length )
                {
                    td++;
                    if ( $(this).is('.clicked') )
                    {
                        alert( 'row = ' + row + ', td = ' + td );
                        $('.row .clicked').removeClass();
                    }
                }
            }); // td each
        }
    }); // .row each
}); // td click

<table>
    <tr class="row">
        <td>A1</td>
        <td>B1</td>
        ...
    </tr>
    <tr class="row">
        <td>A2</td>
        <td>B2</td>
        ...
    </tr>
</table>
<table>
    <tr class="row">
        <td>
            <table>
                <tr>
                    <td>A3</td>
                    <td>B3</td>
                    ...
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>F3</td>
                    <td>G3</td>
                    ...
                </tr>
            </table>
        </td>
    </tr>
</table>

这篇关于在嵌套表格中查找单元格位置（行，列）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！