Question

在下面的小提琴示例中，您将看到一些表格行的突出显示部分。第一部分显示正确，但第二部分有三个突出显示的行没有。问题是我在原始副本的顶部和下一个副本的底部放置了边框。我正在寻找一种方法来定位最后一个副本。

小提琴：

jQuery的：

$('tbody tr td:nth-child(2)').each(function () {
    var cellIndex = $(this).index();
    var next = $(this).parent().next().children().eq(cellIndex)
    if ($(this).text() === $(next).text()) {
        $(this).parent().css('background-color', '#E6F2D3');
        $(next).parent().css('background-color', '#E6F2D3');
        $(this).parent().children().css('border-top', '1px solid #333');
        $(next).parent().children().css('border-bottom', '1px solid #333');
    }
});

Answer 1

试试这个：http://jsfiddle.net/27pks5a3/。

HTML：

<table>
    <tr>
        <td>7</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>7</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>8</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
         <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>7</td>
        <td>2</td>
    </tr>
</table>

CSS：

table {
    border-collapse: collapse;
    table-layout: fixed;
}

table td {
    padding: 2px;
}

.top-border {
    border-top: 1px solid #333;
}

.bottom-border {
    border-bottom: 1px solid #333;
}

.background {
    background-color: #E6F2D3;
}

JS / jQuery的：

$(function() {
    var duplicate = false;
    $("table tr").each(function() {
        var $current = $(this).children();
        var $next = $(this).next().children();
        if($current.text() === $next.text() && !duplicate) {
            duplicate = true;
            $current.addClass("top-border").addClass("background");
        } else if($current.text() === $next.text() && duplicate) { 
            $current.addClass("background");
        } else if($current.text() !== $next.text() && duplicate) {
            $current.addClass("bottom-border").addClass("background");
            duplicate = false;
        }
    });
});

Answer 2

最终解决方案......

<强>的jsfiddle

http://jsfiddle.net/27pks5a3/1/

<强> HTML

<table>
    <tr>
        <td>7</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>7</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>8</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>7</td>
        <td>2</td>
    </tr>
</table>

<强> CSS

table {
    border-collapse: collapse;
    table-layout: fixed;
}
table td {
    padding: 2px;
}
.top-border {
    border-top: 1px solid #333;
}
.bottom-border {
    border-bottom: 1px solid #333;
}
.background {
    background-color: #E6F2D3;
}

<强> JS

$(function() {
    var duplicate = false;
    $("table tr").each(function() {
        var $current = $(this).children(":nth-child(2)");
        var $next = $(this).next().children(":nth-child(2)");
        if($current.text() === $next.text() && !duplicate) {
            duplicate = true;
            $current.parent().children().addClass("top-border").addClass("background");
        } else if($current.text() === $next.text() && duplicate) { 
            $current.parent().children().addClass("background");
        } else if($current.text() !== $next.text() && duplicate) {
            $current.parent().children().addClass("bottom-border").addClass("background");
            duplicate = false;
        }
    });
});

Answer 3

$(function () {

            var values = [];
            var col = $("#scrollableTable tbody tr td:first-child").length;

            for (var i = 0; i < col; i++) {
                values[i] = [];
            }
            $('tr').each(function () {
                $(this).find('td').each(function (i) {
                    if (values[i].indexOf($(this).text()) > -1) {
                        $(this).addClass('duplicate');
                    }
                    values[i].push($(this).text());
                });
            });
            console.log(values);
        });

//if you want to add the the css to first colum only then

$(function () {

            var values = [];
            var col = $("#scrollableTable tbody tr td:first-child").length;

            for (var i = 0; i < col; i++) {
                values[i] = [];
            }
            $('tr').each(function () {
                $(this).find('td:first-child').each(function (i) {
                    if (values[i].indexOf($(this).text()) > -1) {
                        $(this).addClass('duplicate');
                    }
                    values[i].push($(this).text());
                });
            });
            console.log(values);
        });

突出显示具有重复表格单元格的表格行，并仅将边框添加到第一个顶部和最后一个底部副本

3 个答案: