2009-06-11 37 views
6

我有一個表可以對行進行展開和摺疊,並且可以對列進行排序。 下面是我的代碼,有沒有什麼方法可以提高它的性能。 閱讀將完整的行組添加到dom可以提高性能,但是如果我使用$ .each()循環執行,則會引發錯誤。 teble demo在jquery中備用行着色

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

+0

請提供您的表 – Natrium 2009-06-11 07:41:04

+1

的一個更大的演示,爲什麼這是一個社會維基?這是一個完美的問題。 – Natrium 2009-06-11 07:41:42

+0

@Natrium - 我已更新圖像。 – vinay 2009-06-11 10:28:00

回答

15

您可能會發現: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; } 
0

你在每個循環中,做到這一點:

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

     if(index % 2 == 0) 
     { 
      row.addClass("AltRow"); 
     } 
)};