Question

我在HTML表格中实现了一个Jquery UI范围滑块来隐藏某些行。

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

我想要的是＆＃34;隐藏任何＆＃39;列3＆＃39;包含小于5＆＃34;

的值

Jsfiddle是here。

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>

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();

请帮忙。

Answer 1

http://jsfiddle.net/5TTm4/2100/

你有DIV和TABLE具有相同的id = slider。将TABLE ID更改为＆＃34; slider_table＆＃34;
in event＆＃34; slide＆＃34;更改 $（＆＃34;滑块＆＃34;）。找到 ...到 $（＆＃34;＃slider_table＆＃34;）。find

<强> 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>

<强> JQ：

$("#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();
    }
})

Jquery UI Range Slider用于隐藏HTML表格中的一行

1 个答案: