Jquery滑块范围：将范围应用于表行的filter
对于我的实习，我必须为一个表格做一个filter，它必须只显示你给它的值之间的行。 现在我使用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", 1 ); }).parent().hide(); } }); });
滑块具有ID slider-range和表ID ADC_DAC 。 我的桌子是这样组成的：
h1 h2 h3 23 test test2
但随后会有更多行，第一行的值介于0到500之间（需要过滤）
提前致谢 ：）
通过尝试更改slide: function() {}的表属性，您处于正确的轨道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和.parent选择器。 特别是对于像桌子这样的2D结构， for loops通常更容易掌握并保持良好的可读性。 但是，它可能不是最短的代码。
这是工作的jsFiddle演示：
DEMO
