jquery中的替代行着色 [英] Alternate row coloring in jquery

问题描述

我有一个表的展开和折叠的行，列可排序。
以下是我的代码，是否有任何方法来提高其性能。
并且读取将完整的行组添加到dom可以提高性能，但是如果我从$ .each（）循环中抛出错误。
teble demo

  var alt = true; 
 var altSub = true; 
 
 $ .each（myData，function（index，row）{
 
 var noRow = $（row）.length; 
 var firstRow = $（row [ 0]）; 
 
 for（var i = 0; i< noRow; i ++）{
 if（firstRow.attr（'id'）== $（row [i] .attr（'id'））{
 if（alt == true）{
 firstRow.removeClass（odd）。addClass（even）; 
 alt =！alt; 
 altSub = true; 
} else if（alt == false）{
 firstRow.removeClass（even）。addClass（odd）; 
 alt =！alt ; 
 altSub = true; 
} 
} else {
 if（altSub == true）{
 $（row [i]）。removeClass（alt_row_sub ）.addClass（alt_row_sub2）; 
 altSub =！altSub; 
} else if（altSub == false）{
 $（row [i]）。removeClass（alt_row_sub2 .addClass（alt_row_sub）; 
 altSub =！altSub; 
} 
 } 
} 
 $ table.children（'tbody'）。append（row）; 
}）; 
  

链接文本

解决方案

您可能会发现 ：even 和 ：odd 选择器有用。

你可以这样使用它们：

  $（'。stripyTable tr：even'）。addClass（'even'）; 
 $（'。stripyTable tr：odd'）。addClass（'odd'）; 
 $（'。stripyTable .submenu tr：even'）。addClass（'alt_row_sub'）; 
 $（'。stripyTable .submenu tr：odd'）。addClass（'alt_row_sub2'）; 
  

另一件要考虑的事情是，您是否可以使用CSS获取不同样式的子部分，然后在你的JS你只需要担心应用奇/偶类。 CSS可能看起来像：

  .odd {background-color：blue; } 
 .even {background-color：white; } 
 .sub .odd {background-color：green; } 
 .sub .even {background-color：yellow; 
  

I have a table with expand and collapse of rows, with column sortable. Below is my code, is there is any ways to improve its performance. And read appending complete group of rows into dom improves performance, but if i do out of $.each() loop it throws error. teble demo

var alt = true;
var altSub = true;

$.each(myData, function(index, row) {

    var noRow = $(row).length;
    var firstRow = $(row[0]);

    for (var i=0; i < noRow; i++) {
        if(firstRow.attr('id') == $(row[i]).attr('id')) {
            if(alt == true) {
                firstRow.removeClass("odd").addClass("even");
                alt = !alt;
                altSub = true;
            } else if( alt == false) {
                firstRow.removeClass("even").addClass("odd");
                alt = !alt;
                altSub = true;
            }
        } else {
            if(altSub == true) {
                $(row[i]).removeClass("alt_row_sub").addClass("alt_row_sub2");
                altSub = !altSub;
            } else if( altSub == false) {
                $(row[i]).removeClass("alt_row_sub2").addClass("alt_row_sub");
                altSub = !altSub;
            }
        }
    }
    $table.children('tbody').append(row);
});

link text

解决方案

You might find the :even and :odd selectors useful.

You could then use them like this:

$('.stripyTable tr:even').addClass('even');
$('.stripyTable tr:odd').addClass('odd');
$('.stripyTable .submenu tr:even').addClass('alt_row_sub');
$('.stripyTable .submenu tr:odd').addClass('alt_row_sub2');

The other thing to consider is whether you can get the different styling of the subsections just with CSS, then in your JS you only need to worry about applying the odd / even classes. The CSS might look something like:

.odd { background-color: blue; }
.even { background-color: white; }
.sub .odd { background-color: green; }
.sub .even { background-color: yellow; }

这篇关于jquery中的替代行着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！