Jquery滑块范围：应用范围作为表格行上的过滤器

Question

对于我的实习，我必须为表格过滤一个表格，这个表格必须只显示在你给它的值之间的行。 现在我使用jQuery UI的range slider和我有一个正常的HTML表。

我不能得到它的工作，我已经尝试了很多不同的东西。 这里是我的代码：

$(function() { 
      $("#slider-range").slider({ 
       range: true, 
       min: 0, 
       max: 500, 
       values: [ 75, 300 ], 
       slide: function(event, ui) { 
       $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 


      $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
       " - $" + $("#slider-range").slider("values", 1)); 

       $("#ADC_DAC").find("td:nth-child(0)").filter(function() { 
        return parseInt($(this).text()) < $("#slider-range").slider("values", 0); 
       }).parent().hide(); 

       $("#ADC_DAC").find("td:nth-child(0)").filter(function() { 
        return parseInt($(this).text()) > $("#slider-range").slider("values", 1); 
       }).parent().hide(); 
      } 
     }); 
    }); 

滑块有ID slider-range和表ID ADC_DAC。 我的表是由这样的：

<table id="ADC_DAC"> 
    <tr> 
     <td>h1</td> 
     <td>h2</td> 
     <td>h3</td> 
    </tr> 
    <tr> 
     <td>23</td> 
     <td>test</td> 
     <td>test2</td> 
    </tr> 
</table> 

但随后的方式更多的行与第一行（至极需要过滤的）0和500之间的值

感谢提前:)

Answer 1

您尝试更改slide: function() {}中的表格属性以符合正确的方向。

但是，函数中的代码使用了find和其他不利的选择器。

最简单的方法是简单地选择表和过去每行和每列像这样：

var table = document.getElementById("theTable"); 

for (var i = 1, row; row = table.rows[i]; i++) { 
    //iterate through rows (we SKIP the first row: counter starts at 1!) 
    for (var j = 0, col; col = row.cells[j]; j++) { 
     //iterate through columns: if first column not in range: HIDE, else SHOW 

     if (j == 0) {    // if first column 
      if ($(col).html() >= ui.values[ 0 ] && $(col).html() <= ui.values[ 1 ]) { 
       // if in interval 
       $(row).show(); 
      } else { 
       $(row).hide(); 
      } 
     } 
    } 
} 

这应该做你想要什么。该解决方案比您的解决方案容易得多，因为您不必处理.parent和.children选择器。特别是对于像表格这样的二维结构，for loops通常更易于掌握并保持良好的可读性级别。但是，它可能不是最短的代码。

这里是工作的jsfiddle演示：

DEMO