JQuery的 - 搜索HTML表格 - 行跨度問題

Question

我有類似結構的HTML表這一點，但是：

• rowspans不是固定大小的
• 有可能在一個給定的表中的多個rowspans（其中其每一個可以
• 生成表不同長度）的

JSFiddle

<table border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td> 
       <label for="searchbox">Search:</label> 
       <input type="text" id="filter1" /> 
      </td> 
     </tr> 

    </tbody> 
</table> 
<table id="foo" border="1px"> 
    <tr> 
     <th>A</th> 
     <th>B</th> 
     <th>C</th> 
     <th>D</th> 
     <th>E</th> 
    </tr> 
    <tbody id="data"> 
    <tr> 
     <td class="col1" rowspan="2">1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
    </tr> 
    <tr> 
     <td class="col1">v</td> 
     <td>w</td> 
     <td>x</td> 
     <td>y</td> 
     <td>z</td> 
    </tr> 
</table> 

使用第一列進行搜索。輸入將隱藏所有行「1」（如搜索搜索詞時

<script language="javascript" type="text/javascript"> 
    $(function() {  
    $('#filter1').change(function() { 
    $("#foo td.col1:contains('" + $(this).val() + "')").parent().show(); 
    $("#foo td.col1:not(:contains('" + $(this).val() + "'))").parent().hide(); 
    }); 
    }); 
</script> 

的問題：我正在與行跨度麻煩使用如下所述本次搜索/過濾功能時， 'v'） - 只有行的第一行被隱藏，而所有後續行的部分行仍然存在。所以行[6,7,8,9]將永遠保持。

實施例的表：

[1 - 2,3,4,5] 
[ - 6,7,8,9] 
[v - w,x,y,z] 

在搜索 ''（正確）：

[1 - 2,3,4,5] 
[ - 6,7,8,9] 

在搜索 'v'（不正確的）：

[ - 6,7,8,9] <- this row should not be returned 
[v - w,x,y,z] 

我如何去正確地隱藏這些子rowspans？

更新： 我認爲解決的辦法在於將取決於行跨度數不同的類，那麼具有與.parent適當數量的（）下一個（我）.hide不同的方式處理這些類的函數（。 ） - 雖然我不知道如何做到這一點，以及這種方法是否正確。

Answer 1

Rowspan ed td s不是所有tr他們似乎屬於的元素的子女。 DOM樹中的所有元素可能只有一個直接父代，在您的情況下，它是直接在HTML中顯示的tr父代。考慮到這一點，我建議你用div s或類似的設計讓你的設計更自然。

不管怎麼說，而無需改變你的HTML，你可以做一些補償與行指數及其rowspan屬性，檢查它是否使用：

$(function() { 
    $('#filter1').change(function() { 
     var toShow = $("#data td.col1:contains('" + $(this).val() + "')"); 
     $("#data tr").not($('#data tr').has(toShow)).hide(); 
     toShow.each(function() { 
      var rspan = $(this).attr('rowspan'), 
       father = $(this).parent(); 
      if (rspan && +rspan > 1) { 
       father.nextUntil(':nth-child(' + (father.index() + (+rspan) + 1) + ')').andSelf().show(); 
      } else father.show(); 
     }); 
    }); 
}); 

Fiddle