Javascript Jquery UI范围滑块用于隐藏HTML表中的行

我正在为HTML表实现一个Jquery UI范围滑块，以隐藏某些行

我创建了以下功能，但没有成功

我想要的是“隐藏任何“第3列”包含小于5的值的特定原始数据”

Jsfiddle是

HTML是：

<div id="slider"></div>

<table id="slider" border=1>
<tbody>
<tr>
<td>Name</td>
<td>Release</td>
<td>Rating</td>
<td>Country</td>
</tr>
<tr>
<td>GoodFilm</td>
<td>2013</td>
<td>9</td>
<td>USA</td>
</tr>
<tr>
<td>BadFilm</td>
<td>2014</td>
<td>4</td>
<td>USA</td>
</tr>
</tbody>
</table>

名称
释放
评级
国家
好电影
2013
9
美国
坏电影
2014
4.
美国

Javascript是：

$("#slider").slider(
{
        value:1,
        min: 0,
        max: 10,
        step: 1,
        slide: function( event, ui ) { 
$("slider").find("td:nth-child(3)").filter(function () {
return parseInt($(this).text()) <5; 
}).parent().hide();

$（“#滑块”）.滑块(
{
价值：1，
分:0,，
最高：10，
步骤：1，
幻灯片：函数（事件、ui）{
$（“滑块”）.find（“td:n子项（3）”）.filter（函数（）{
返回parseInt（$（this）.text（））

您有相同id=滑块的DIV和TABLE。将TABLE id更改为“slider\u TABLE”
在事件“slide”更改为$（“slider”）。查找..到$（“#slider_table”）。查找

HTML:

<h1>Hide A Raw</h1>

<div id="slider"></div>
<table id="slider_table" border=1>
    <tbody>
        <tr>
            <td>Name</td>
            <td>Release</td>
            <td>Rating</td>
            <td>Country</td>
        </tr>
        <tr>
            <td>GoodFilm</td>
            <td>2013</td>
            <td>9</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>BadFilm</td>
            <td>2014</td>
            <td>4</td>
            <td>USA</td>
        </tr>
    </tbody>
</table>

$("#slider").slider({
    value: 1,
    min: 0,
    max: 10,
    step: 1,
    slide: function (event, ui) {
        $("#slider_table").find("td:nth-child(3)").filter(function () {
            return parseInt($(this).text()) < 5;
        }).parent().hide();
    }
})

隐藏原始文件
名称
释放
评级
国家
好电影
2013
9
美国
坏电影
2014
4.
美国

JQ:

<h1>Hide A Raw</h1>

<div id="slider"></div>
<table id="slider_table" border=1>
    <tbody>
        <tr>
            <td>Name</td>
            <td>Release</td>
            <td>Rating</td>
            <td>Country</td>
        </tr>
        <tr>
            <td>GoodFilm</td>
            <td>2013</td>
            <td>9</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>BadFilm</td>
            <td>2014</td>
            <td>4</td>
            <td>USA</td>
        </tr>
    </tbody>
</table>

$("#slider").slider({
    value: 1,
    min: 0,
    max: 10,
    step: 1,
    slide: function (event, ui) {
        $("#slider_table").find("td:nth-child(3)").filter(function () {
            return parseInt($(this).text()) < 5;
        }).parent().hide();
    }
})

$（“#滑块”）.滑块({
价值：1，
分:0,，
最高：10，
步骤：1，
幻灯片：功能（事件、用户界面）{
$（“#slider_table”）.find（“td:nth child（3）”）.filter（函数（）{
返回parseInt（$（this）.text（））<5；
}).parent（）.hide（）；
}
})
谢谢。这很有效。但是，当您将滑块移向10时，我希望隐藏列再次显示而不刷新。（动态）。我是否应该为此添加任何其他代码？谢谢。是否要根据评级显示或隐藏行？老实说，表应该动态更改（不刷新）当你移动滑块时。当滑块值小于5时，它应该隐藏，如果大于5，它应该显示。谢谢！这太棒了。它可以工作。但是，当我在我的PHP网页中使用它时，第一个示例（仅隐藏）正在工作。但是，不是动态的。实际上我是从MySQL获取表数据的。我在底部粘贴了其他脚本文件。非常感谢你的朋友。如何添加新行？使用ajax？