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

Jquery UI Range Slider to hide a row in HTML table

本文关键字：HTML 隐藏 用于 范围 UI Jquery      更新时间：2023-09-26

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

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

我想要的是"隐藏任何'第 3 列'包含小于 5 的值的特定原始"

Jsfiddle在这里。

  1. 该 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>

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

请帮忙。

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

  1. 你有具有相同 id=滑块的 DIV 和表。将表 ID 更改为"slider_table"
  2. 如果"滑动"更改 $（"滑块"）.find ...到 $（"#slider_table"）.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();
    }
})
相关文章：