jQuery选择带有rowspan的表中的可视列 [英] jQuery select visual column in table with rowspan

问题描述

我看过几个类似的问题，但没有解决这个具体问题。请考虑下表：

I have seen a few similar questions but nothing that answers this specific problem. Consider the following table:

<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与'3'作为内容。

Using jQuery, how can I select all items in a specific visual column? For example, if I want to select column 3, I should get all td's with 'three' as content.

推荐答案

Haven'看看发布的插件，但我发现这个问题很有趣，所以我创造了一个小提琴！

Haven't looked at the posted plugin, but I found the question interesting so I created a fiddle!

http://jsfiddle.net/PBPSp/

如果插件有效，它可能比这更好，但它是一个有趣的运动，所以我也可以发布它。

If the pluggin works it may be better than this, but it was a fun exercise so I may as well post it.

将 colToGet 更改为要突出显示的列。

Change colToGet to whichever column you want to highlight.

$(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);
                }
            }
        });
    });
});​

这篇关于jQuery选择带有rowspan的表中的可视列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！