jQuery выбрать визуальный столбец в таблице с размахом строк

Question

Я видел несколько похожих вопросов, но ничего, что отвечало бы этой конкретной проблеме.Рассмотрим следующую таблицу:

<table id="foo" border="1px">
    <tr>
        <td rowspan="2">one</td>
        <td>two</td>
        <td rowspan="2">three</td>
        <td>four</td>
        <td>five</td>
    </tr>
    <tr>
        <td rowspan="2">two</td>
        <td>four</td>
        <td>five</td>
    </tr>
    <tr>
        <td rowspan="2">one</td>
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
    <tr>
        <td>two</td>
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
</table>

Используя jQuery, как я могу выбрать все элементы в определенном визуальном столбце?Например, если я хочу выбрать столбец 3, я должен получить все тд с «три» в качестве содержимого.

Answer 1

Этот плагин обрабатывает сложные выборки colspan и rowspan:

$('#foo th:nth-col(3), #foo td:nth-col(3)').css("color","red");

Answer 2

Не посмотрел на опубликованный плагин, но мне показался интересным вопрос, поэтому я создал скрипку!

http://jsfiddle.net/PBPSp/

Если плагин работает, это может быть лучше, чем это, но это было забавное упражнение, поэтому я могу также опубликовать его.

Измените colToGet на любой столбец, который вы хотите выделить.

$(function() {
    var colToGet = 2;

    var offsets = [];
    var skips = [];

    function incrementOffset(index) {
        if (offsets[index]) {
            offsets[index]++;
        } else {
            offsets[index] = 1;
        }
    }

    function getOffset(index) {
        return offsets[index] || 0;
    }

    $("#foo > tbody > tr").each(function(rowIndex) {

        var thisOffset = getOffset(rowIndex);

        $(this).children().each(function(tdIndex) {

            var rowspan = $(this).attr("rowspan");

            if (tdIndex + thisOffset >= colToGet) {
                if(skips[rowIndex]) return false;

                $(this).css("background-color", "red");

                if (rowspan > 1) {
                    for (var i = 1; i < rowspan; i++) {
                        skips[rowIndex + i] = true;
                    }
                }

                return false;
            }

            if (rowspan > 1) {
                for (var i = 1; i < rowspan; i++) {
                    incrementOffset(rowIndex + i);
                }
            }
        });
    });
});​

Answer 3

Если вы хотите поддерживать colspan и rowspan, то сначала вам нужно составить таблицу индексов, т.е. матрица, которая определяет положение ячейки в каждом строка независимо от разметки. Тогда вам нужно отслеживать события всех ячейки таблицы и рассчитать их смещение в матрице и столбцах которые разделяют горизонтальный и вертикальный индекс.

Это описание https://github.com/gajus/wholly, плагина, который я разработал для этой цели. Используя события, вы можете найти все значения в строке или в столбце, включая те, которые прикреплены с использованием свойств rowspan или solspan.

Я сделал визуализацию, иллюстрирующую таблицу и события, которые запускаются при навигации.

Оранжевый - активная ячейка, красный - ячейки, вызванные вертикальным событием, а синий - ячейки, вызванные горизонтальным событием.

Answer 4

Я не уверен, как вы хотите их выбрать, но что-то вроде этого?

$(function() {
    $("#foo").find("td:contains('three')").css("background-color","#eee");
});

Что вы хотите сделать с ТД после их выбора?

Answer 5

Дайте каждому вашему классу строк / столбцов.Таким образом, строка 1 столбца 1 будет иметь class='Row1 Column1' Затем выберите класс по мере необходимости.(Если вы не хотите когда-либо выбирать строки, вам не понадобится спецификация строк, просто пытающаяся экстраполировать, как сделать сетку.