如何在沒有迭代的情況下篩選HTML表格中「已標記」行的子集？

我有一個CGI腳本，可以以任意順序生成任意數量的行的HTML表格。如何在沒有迭代的情況下篩選HTML表格中「已標記」行的子集？

每行是一個或更多子集的成員，並且總共有26個子集（26個代表小的相對常量）。

在我生成頁面時，我知道每行所屬的哪些子集，並且可以以任何必要的方式標記它們。

然後，我希望在頁面上提供26個按鈕，用戶可以用它們中的任何一個按鈕將表格過濾到該行子集。行的出現順序相對於彼此顯着，但通過隱藏不屬於用戶期望查看的子集的行，不會丟失任何信息。

第一個優先級是過濾的計算是在客戶端完成的，而不是在服務器端完成的，並且客戶端不會重新請求頁面，因爲它的大小很重要，而且服務器非常繁忙的東西。（閱讀爲：Javascript，對嗎？）頁面不經常請求，但通常會爲每個頁面請求請求許多篩選操作。

第二個優先級是客戶端過濾儘可能高效地完成。數據集非常大。

第三個優先級是儘可能廣泛的瀏覽器互操作性。

我不是任何一個網絡程序員，如果你不能告訴。

我最初試圖通過將每個標記表示爲CSS類，根據需要爲每行分配多個類，然後使用JavaScript修改CSS定義來做到這一點，但它開始讓我頭疼。如果這有效，我無法弄清楚。

來源

2011-09-12 Maarx

CSS的方式，檢查出來 - JSFiddle
也許有人可以做一些ie6-7，如果該事項。

<!DOCTYPE html> 
<html> 
    <body> 
     <style> 
      #table tr { display: none } 
      #table.all tr { display: table-row } 
      #table.bar tr.bar { display: table-row } 
      #table.foo tr.foo { display: table-row } 
     </style> 
     <input type="button" value="Foo" onclick="filter('foo')"> 
     <input type="button" value="Bar" onclick="filter('bar')"> 
     <table id="table" class="all"> 
      <tr class="foo"><td>1</td></tr> 
      <tr class="bar"><td>2</td></tr> 
      <tr class="foo bar"><td>3</td></tr> 
     </table> 
     <script type="text/javascript"> 
      var table = document.getElementById('table') 
      function filter (cat) { 
       table.className = cat 
      } 
     </script> 
    </body> 
</html>

來源

2011-09-12 04:24:28 Leonid

這不會對IE6和IE7的工作？因爲它很性感。 – Maarx

他們不接受'table-row'作爲'display'值，但（據我所知）''block'正常工作。我現在沒有ie6來檢查，聲明'{display：block; display：table-row}'可能只是工作，如果不是的話 - 還有條件註釋或其他東西。 – Leonid

而不是'display：none'和'display：table-row'，或許有時'visibility：collapse'和'visibility：visible'更合適，因爲它不會強制重新佈局（參見http：// www.w3.org/TR/CSS2/tables.html#dynamic-effects）。 – equaeghe

我無法在大型數據集上真正測試它，但如果它到達（像以某種方式分塊數據集等），解決任何問題都不會太困難。

我懷疑這裏是否存在真正的性能問題 - 如果您的瀏覽器能夠顯示它們，但這只是一個猜測。無論如何，您應該仔細考慮分頁數據，如果數據量很大。或者，如果用戶請求，則允許篩選以輪詢服務器以獲取更多信息。向用戶顯示大量文字很少是一個很好的可用性決定。

你將不得不在瀏覽器上測試，但我沒有看到任何瀏覽器問題。這樣說的話，我希望下面的例子能夠爲你服務（可以在這個JSFiddle上玩）。這不是非常有效，但應該給你一個想法。另外 - match一部分也許應該進行更好地避免誤報等

<html> 
<body> 
    <table id="table" style="width: 200px; text-align: center;"> 
     <tr style="border: 1px gray dashed;" class="1"><td>1</td></tr> 
     <tr style="border: 1px gray dashed;" class="2 4"><td>2 4</td></tr> 
     <tr style="border: 1px gray dashed;" class="3"><td>3</td></tr> 
     <tr style="border: 1px gray dashed;" class="4 5"><td>4 5</td></tr> 
     <tr style="border: 1px gray dashed;" class="5"><td>5</td></tr> 
     <tr style="border: 1px gray dashed;" class="3"><td>3</td></tr> 
     <tr style="border: 1px gray dashed;" class="4"><td>4</td></tr> 
     <tr style="border: 1px gray dashed;" class="5 1"><td>5 1</td></tr> 
    </table> 
    <button onClick="show('1')">1</button> 
    <button onClick="show('2')">2</button> 
    <button onClick="show('3')">3</button> 
    <button onClick="show('4')">4</button> 
    <button onClick="show('5')">5</button> 
    <button onClick="reset()">Reset</button> 
    <script> 
     var table = document.getElementById('table'); 

     function show(className) 
     {    
      reset(); 
      for(var i = 0, l = table.rows.length; i < l; i++) 
      { 
       var row = table.rows[i]; 

       if(!row.className.match(className)) 
       { 
        row.style.visibility = 'hidden'; 
       } 
      } 
     } 

     function reset() 
     { 
      for(var i = 0, l = table.rows.length; i < l; i++) 
      { 
       var row = table.rows[i]; 
       row.style.visibility = 'visible'; 
      } 
     } 
    </script> 
</body> 
</html>

來源

2011-09-12 03:39:53 ZenMaster

使用jQuery。然後使用.show()和.hide()方法。

HTML：

<tr class="category1"> 
    ... 
</tr> 

<div id="toggleButtons"> 
    <a href="#" class="category1">Hide Category 1</a> 
</div>

的JavaScript：

$(function(){ 
    $("#toggleButtons a").click(function(){ 
    $("tr." + $(this).attr("class")).hide(); 
    }, function(){ 
    $("tr." + $(this).attr("class")).show(); 
    }); 
});

來源

2011-09-12 05:11:52

如何在沒有迭代的情況下篩選HTML表格中「已標記」行的子集？

回答

相關問題