Jquery滑块范围：应用范围作为表格行的过滤器 [英] Jquery slider range: apply range as a filter on table rows
问题描述
对于我的实习，我必须为一张桌子做一个过滤器，这个桌子必须只显示你给它的值之间的行。
现在我使用Jquery UI为范围滑块，并且我有一个普通的html表。
I不能得到它的工作，我已经尝试了很多不同的东西。
这里是我的代码：
$ $ $ $（＃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（values，1））;
$（＃ADC_DAC）。find（td：nth-child（0）） ）{
return parseInt（$（this）.text（））< $（＃slider-range）.slider（values，0）;
}）。parent（）。 hide（）;
$（＃ADC_DAC）。find（td：nth-child（0））。filter（function（）{
return parseInt（$ ）.text（））> $（＃slider-range）.slider（values，1）;
}）父（）隐藏（）。;
}
}）;
}）;
滑块的ID 滑块范围和表ID ADC_DAC 。
我的表格是这样构成的：
< table id =ADC_DAC>
< tr>
< td> h1< / td>
< td> h2< / td>
< td> h3< / td>
< / tr>
< tr>
< td> 23< / td>
< td>测试< / td>
< td> test2< / td>
< / tr>
< / table>
然后用更多的行和第一行的值在0到500之间（需要过滤）
预先致谢：） 通过尝试更改 slide：function（）{} 中的表属性来实现正确的跟踪。 然而，该函数中的代码使用 find 的和其他不利的选择器。
最简单的方法是简单地选择表并像这样遍历每一行和列：
var table = document.getElementById（theTable）;
for（var i = 1，row; row = table.rows [i]; i ++）{
//遍历行（我们跳过第一行：计数器从1开始！ ）
for（var j = 0，col; col = row.cells [j]; j ++）{
//遍历列：如果第一列不在范围内：HIDE，否则显示
if（j == 0）{//如果第一列
if（$（col）.html（）> = ui.values [0]&& $（col）。 html（）< = ui.values [1]）{
// if in interval
$（row）.show（）;
} else {
$（row）.hide（）;
}
}
}
}
应该做你想做的事情。这个解决方案比你的更容易，因为你不必处理 .parent 和 .children 选择器。特别是对于像表格这样的2D结构， for循环通常更易于掌握并保持良好的可读性。然而，它可能不是最短的代码。
以下是正在运行的jsFiddle演示：
DEMO
For my internship i have to make a filter for a table wich has to show only the rows that are between the values you give it.
Now i used Jquery UI for the range slider and i have a normal html table.
I cant get it to work and i've tried many different things. Here's my code:
$(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();
}
});
});
the slider has the ID slider-range and the table ID ADC_DAC.
my table is made up like this:
<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>
But then with way more rows and with values between 0 and 500 for the first row(wich needs filtering)
Thanks in advance :)
You were on the right track by trying to change the table properties in the slide: function() {}.
However, the code in the function makes use of find's and other unfavourable selectors.
The easiest way would be to simply select the table and go over each row and column like so:
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();
}
}
}
}
That should do what you want. This solution is much easier than yours because you don't have to deal with the .parent and .children selectors. Especially for 2D structures like tables, for loops are often easier to grasp and maintain a nice level of readability. However, it might not be the shortest code.
Here is the working jsFiddle demo:
DEMO
这篇关于Jquery滑块范围：应用范围作为表格行的过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
