jQuery在具有行跨度的表中选择可视列答案

【问题标题】：jQuery select visual column in table with rowspanjQuery在具有行跨度的表中选择可视列
【发布时间】：2011-08-24 06:58:45
【问题描述】：

我看到了一些类似的问题，但没有一个可以回答这个特定问题。考虑下表：

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

【问题讨论】：

标签： jquery jquery-selectors html-table

【解决方案1】：

This plugin 处理复杂的 colspan 和 rowspan 选择：

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

【讨论】：

由于伪选择器 API 的变化，不适用于 jQuery 1.8+ - stackoverflow.com/questions/11624345/…

【解决方案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);
                }
            }
        });
    });
});

【讨论】：

有什么办法可以将其扩展到涵盖 colspans 吗？
@Asad 又快又脏，只经过轻微测试，但它似乎工作。 jsfiddle.net/PBPSp/80
谢谢！我实际上是在尝试在 .NET 中执行此操作，但在理解算法时遇到了一些麻烦。

【解决方案3】：

如果你想支持 colspan 和 rowspan，那么首先你需要建立表索引，即。识别每个单元格位置的矩阵行而不管标记。然后你需要跟踪所有的事件表格单元格并计算它们在矩阵和列中的偏移量共享水平和垂直索引。

这是https://github.com/gajus/wholly 的描述，这是我为此目的开发的一个插件。使用事件，您可以找到行或列中的所有值，包括使用 rowspan 或 solspan 属性附加的值。

我做了一个可视化来说明一个表格和在导航时触发的事件。

橙色是活动单元格，红色是垂直事件触发的单元格，蓝色是水平事件触发的单元格。

【讨论】：

【解决方案4】：

给每个行/列类。所以第 1 行第 1 列将有 class='Row1 Column1' 然后根据需要选择类。（如果您不想在行上进行选择，则不需要行规范只是试图推断出如何做网格。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：