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

Posted 2023-03-10

【中文标题】jQuery滑块范围：应用范围作为表格行的过滤器

【英文标题】：jQuery slider range: apply range as a filter on table rows

【发布时间】：2015-03-06 15:31:14

【问题描述】：

在我的实习中，我必须为一个表格制作一个过滤器，该表格必须只显示介于你给它的值之间的行。 我为range slider 使用了 jQuery UI，并且我有一个普通的 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 之间（需要过滤）

【参考方案1】：

您尝试更改 slide: function() 中的表属性是正确的。

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

最简单的方法是简单地选择表格并像这样遍历每一行和每一列：

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 选择器。特别是对于像表格这样的 2D 结构，for loops 通常更容易掌握并保持良好的可读性。但是，它可能不是最短的代码。

这里是工作的 jsFiddle 演示：

DEMO

【讨论】：

谢谢你，正是我需要的:)

不错的解决方案 :) 我如何使用bootgrid 来做到这一点？它没有 show() 和 hide()