jquery에서 같은 셀을 사용하여 행을 그룹화하는 방법은 무엇입니까?

Question

치료할 수있는 문제로 미안하지만 어떤 이유로이 문제를 해결할 수는 없습니다.

각 셀에 3 개의 행이 있습니다. JQUERY 사용 전

1. 필터 아웃이 경우 변수 "큰"동일한 세포 수 (3)가없는 모든 행
   필요 2 셀의 값 (색)하여 나머지 행
2. 기
3. 은 ...
   빈 그룹 내 예를 보면

쉽게을 표시해서는 안된다 (.. 블랙, 화이트, 레드 등) 색상의 값을

을 그룹 헤더를 추가

var dogSize = "large"; 

큰 개만 표시, 헤더가있는 개 색상별로 그룹화하십시오. 헤더에 항목이 없으면 표시하지 않습니다. 나는 그것을 알아낼 수 있지만,이 시점에서 내가 고민하고 있는데이를 달성하는 방법을 모른다 때까지

<tr class="dogs"> 
    <td class="name">Mindy</td> <td class="color">black</td> <td class="size">big</td> </tr> 
<tr class="dogs"> 
    <td class="name">Mandy</td> <td class="color">black</td> <td class="size">little</td></tr> 
<tr class="dogs"> 
    <td class="name">Tina</td> <td class="color">spotted</td> <td class="size">medium</td></tr> 
<tr class="dogs"> 
    <td class="name">Sandy</td> <td class="color">brown</td> <td class="size">big</td></tr> 
<tr class="dogs"> 
    <td class="name">Harry</td> <td class="color">brown</td> <td class="size">little</td></tr> 
<tr class="dogs"> 
    <td class="name">Sam</td> <td class="color">brown</td> <td class="size">medium</td></tr> 
<tr class="dogs"> 
    <td class="name">Larry</td> <td class="color">white</td> <td class="size">big</td></tr> 
<tr class="dogs"> 
    <td class="name">Chico</td> <td class="color">black</td> <td class="size">small</td></tr> 

일반적으로 나는이 내 머리를 쾅 것입니다. 도움을 주셔서 감사합니다!

Answer 1

당신은 특정 크기에만 행을 선택합니다 :contains() 의사 선택기를 사용하여 업데이트 새 순서로 테이블 행 정렬 .sort()를 사용할 수 있습니다

var dogSize = 'medium', 
    $table = $('table'), 
    $TRs = $table.find('tr'); 

$TRs.filter(function() { 
    return ($(this).children('.size').text() != dogSize); 
}).hide(); 

var arr = $TRs.sort(function (a, b) { 
    var aText = $(a).children('.color').text(), 
     bText = $(b).children('.color').text(); 
    if (aText > bText) { 
     return 1; 
    } else if (aText < bText) { 
     return -1; 
    } 
    return 0; 
}); 
$table.empty().append(arr); 

을

여기에 데모가 있습니다 : http://jsfiddle.net/C399w/2/