jquery - 在嵌套表中查找单元格位置(行、列)

标签 jquery html-table

我有以下简单的 jQuery 代码,它告诉我单元格在表格内的行/列(不包括列跨度)。

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 修改是必要的:我们必须标记主行以将它们与嵌套行区分开。我添加了类 .row 来达到此目的。

$('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>

关于jquery - 在嵌套表中查找单元格位置(行、列),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7339830/

相关文章:

javascript - 单击 Javascript 时返回单元格的 ID

jQuery - 在两个位置将购物车值设置为 0

javascript - 如何使用 Select 2 js 找到确切的单词?

javascript - jQuery:隐藏 div。单击按钮后显示该 div 并隐藏另一个 div

jquery - <TD> 和 <table> 宽度坏了?

html - 如何使表格行占据其容器的 100% 宽度?

html - 即使有条件评论,Outlook 中的表格宽度也会变大

javascript - CSS - 在单击之前向上滑动一个不可见的 div

jquery - 单击按钮以 HTML 随机更改图像

java - 使用 Jsoup 和 Java 查找网页表中的值,其中所有内容都有 "td"标记