Поиск позиций ячеек (строка, столбец) во вложенных таблицах - PullRequest
Новая
       0

Поиск позиций ячеек (строка, столбец) во вложенных таблицах

4 голосов
/ 07 сентября 2011

У меня есть следующий простой бит jQuery, который сообщает мне, какая строка / столбец находится внутри таблицы (исключая colspans). 

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

Достаточно просто ... за исключением того, что мои таблицы вложенывнутри других таблиц, и я не знаю, какое должно быть смещение.Например, у меня есть ячейка (1,1), эта ячейка находится в таблице, которая находится во второй ячейке другой таблицы ... И эта первая ячейка имеет таблицу с тремя столбцами.Таким образом, моя ячейка действительно (4,1)

РЕДАКТИРОВАТЬ: более полный образец, с большим количеством тестовых случаев.Я почти понял это.Просто некоторые странные случаи, которые вызывают проблемы.(Теперь с цветными тестами)

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

... Я понимаю, что это ненормально, и HTML глуп, но это то, с чем мне нужно работать.

1 Ответ

2 голосов
/ 08 сентября 2011

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