1

在这种情况下寻找一些 jquery 帮助......

我在一个页面上显示了一个体育排名列表，其中的表格可能包含几千名球员。出于显示目的，我只想显示当前登录用户之前的五行和之后的五行。

例如，如果我有一张包含以下信息的表格：

<table>
<tr><td>Person 1</td><td>999</td></tr>
<tr><td>Person 2</td><td>998</td></tr>
<tr><td>Person 3</td><td>997</td></tr>
<tr><td>Person 4</td><td>994</td></tr>
<tr><td>Person 5</td><td>992</td></tr>
<tr><td>Person 6</td><td>980</td></tr>
<tr><td>Person 7</td><td>970</td></tr>
<tr><td class="me">Person 8</td><td>960</td></tr>
<tr><td>Person 9</td><td>950</td></tr>
<tr><td>Person 10</td><td>940</td></tr>
<tr><td>Person 11</td><td>930</td></tr>
<tr><td>Person 12</td><td>920</td></tr>
<tr><td>Person 13</td><td>910</td></tr>
<tr><td>Person 14</td><td>900</td></tr>
<tr><td>Person 15</td><td>890</td></tr>
</table>

我以第 8 个人身份登录。所以我应该只看到第 3 个人到第 13 个人的行。

我希望找到一个解决方案，使用类似于 jquery 的 prev() 和 next() 函数的循环。

任何帮助将不胜感激。提前致谢！

4

3 回答 3

0

这里有很多索引，请检查此代码...（在 jsfiddle 上预览）

// First we get the index of the row containing the user
var me_tr_index = $('tr')
    .index($('tr')
        .filter( function (){ 
            return $('td.me', this).length;
        })
    );

// Now we have our index, we can use it inside conditions
$('tr').each( function (i) {
    if(i < me_tr_index -2 || i > me_tr_index +2)
        $(this).css('color', 'red');
    if(i === me_tr_index )
        $(this).css('font-weight', 'bold');
});
于 2013-08-10T15:20:28.297 回答
0

我会做这样的事情：

禁用所有“tr”的显示，并将类放在“tr”而不是“td”元素上。

    myindex = $('tr').index($('.me'));
    if(myindex>=0){
        for(i=(myindex*1-5);i<=(myindex*1+5);i++){
            if(i>=0){$('tr').eq(i).show();}
        }
    }
    else{console.log("You are not there.")}
于 2013-08-10T15:00:36.930 回答
0

虽然您已经接受了答案，但我想我会提供一个简单的 JavaScript 解决方案：

// to avoid explicitly iterating through parentNodes:
HTMLElement.prototype.closest = function (tagName) {
    tagName = tagName.toLowerCase();
    var self = this,
        selfTag = self.tagName.toLowerCase();
    return selfTag == tagName ? self : self.parentNode.closest(tagName);
}

function borders (target, distance) {
    var self = target,
        tr = self.closest('tr'),
        centre = tr.rowIndex,
        tbody = tr.closest('tbody'),
        rows = tbody.getElementsByTagName('tr'),
        min = centre - parseInt(distance,10),
        max = centre + parseInt(distance,10);
    for (var i = 0, len = rows.length; i < len; i++) {
        rows[i].style.display = (i > min - 1) && (i < max + 1) ? 'table-row' : 'none';
    }

}

var me = document.querySelector('.me');
borders(me, 5);

JS 小提琴演示。

以及一个简单的 jQuery 替代方案：

var meIndex = $('.me').closest('tr').index();

$('tr').hide().filter(function (i) {
    return i >= (meIndex - 5) && i <= (meIndex + 5);
}).show();

JS 小提琴演示。

参考：

于 2013-08-10T15:58:23.183 回答