将类应用于前 5 行和后 5 行

Applying Class to First 5 and Last 5 Rows

本文关键字：应用于      更新时间：2023-09-26

我已经为我希望完成的目标构建了一个简单的示例。 http://jsfiddle.net/helpinspireme/ejHFf/我想做的是

  • 计算表<tr>的数量
  • 如果表少于 6，则所有表都得到类 red
  • 如果大于 5 但小于 11，则前 5 名获得 red 级，其余的获得black
  • 如果超过 10 个，则将类 red 添加到前 5 个，然后后 5 个将类black添加到。 前 5 和后 5 之间的行没有类。

任何帮助将不胜感激。

你想要

    if (x < 6) {
        $(tooltips_id).addClass('red');
    } else if (x > tooltips_amount-5) {
        $(tooltips_id).addClass('black');
    } else {
        // else
    }

你已经做了什么？你几乎描述了整个算法。只需使用 slice 获取索引之间的元素，length获取项目数。要添加类，请使用 addClass 。

这不是您问题的答案，因为您可能出于支持旧版浏览器等原因需要它（特别值得注意的是，IE 仅支持我的解决方案 从版本 9 开始）。虽然出于同样的原因不使用此解决方案可能是件好事，但我确实认为重要的是要注意，根据更新的标准，即使不使用任何 Javascript，您也可以执行此操作。你只有CSS：

tr
{
    border: 1px solid #000;
}
tr:nth-child(-n+5)
{
    border: 1px solid red;
}

tr:nth-last-child(-n+5)
{
    border: 1px solid red;
}

尝试这样的事情：

$("tr:lt(5)").css({ backgroundColor : "blue" });
$("tr:gt(5)").css({ backgroundColor : "red" });

这是一个jsFiddle

var tooltip = function() {
    var tooltips_tr = $('#primary_table tr');
    var tooltips_amount = $(tooltips_tr).length;
    tooltips_tr.each(function(i){
        i+=1;
        if(tooltips_amount < 6) $(this).addClass('red');
        if(tooltips_amount > 5 && tooltips_amount < 11)
        {
            if(i<=5) $(this).addClass('red');    
            else $(this).addClass('black');
        }
        if(tooltips_amount > 10)
        {
            if(i<=5) $(this).addClass('red');    
            else if(i>tooltips_amount-5) $(this).addClass('black');
        }
    });
}

例。

这个

小提琴http://jsfiddle.net/9fmNG/

var rows = $('table tr');
rows.map(function( index, row){
    var allRows  = rows.size();
    if(index+1 <= 5)
        $(row).addClass('red');
    else if((index+1) >= (allRows-5)){
        $(row).addClass('black');    
    }               
})​
相关文章：