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＆＃39; 3＆＃39;作为内容。

Answer 1

This plugin处理复杂的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

我不确定你想如何选择它们，但这样的事情呢？

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

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

Answer 4

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

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

我做了一个可视化，说明了一个表以及导航时触发的事件。

Wholly

橙色是活跃的细胞，红色是由垂直事件触发的细胞，蓝色是由水平事件触发的细胞。

Answer 5

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

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

5 个答案: