jQuery 在带有 rowspan 的表中选择可视列

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 列，我应该获取所有以“三”为内容的 td。

Answer 1

此插件处理复杂的列跨度和行跨度选择：

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

为每个行/列提供类。因此，第 1 行第 1 列将具有 class='Row1 Column1' 然后根据需要选择该类。 （如果您不想选择行，则不需要行规范，只是试图推断出如何进行网格。

Answer 5

我不确定你想如何选择它们，但是像这样的东西？

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

选择 TD 后您想对它们做什么？