Question

我正在尝试在我的页面上添加一个滑块，该滑块过滤特定类表的特定类的特定数字列。

我尝试纠正并修改了许多现有的example1，example2 ...但没有成功。

我使用Zurb-Foundation slider。 Slider现在可以使用，但它与我的页面的任何内容都没有关联（根本没用）。这是滑块的HTML;

<div class="large-9 columns">
   <div class="slider" data-slider data-initial-start="0.5" data-end="1" data-step="0.05" id="slider-filter">
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
    <span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns">
<input type="number" id="slider-number">
</div>

根据基础文档和上面的例子，这是我的JS：

$(document).ready(function () {
$(function () {
    $("#slider-filter").slider({
        slide: function (event, ui) {
            // in this function we can define what happens when a user changes the sliders
            console.log("Slider is moving");
        }
    })
})

}）

我在这部分已经失败了，检测我的滑块运动......我也尝试根据doc这行（var elem = new Foundation.Slider(element, options);）来使用.slide（）...没有成功。

表示例：

<table id="Table-to-filter">
 <tr>
   <td>First Column</td>
   <td>Second Column</td>
   <td>Third Column</td>
 </tr>
 <tr class="Prt">
   <td>XXXX</td>
   <td>23</td>
   <td>XXXX</td>
 </tr>
 <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>51</td>
   <td>XXXX</td>
 </tr>
 <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>77</td>
   <td>XXXX</td>
 </tr>
 <tr class="Prt">
   <td>XXXX</td>
   <td>215</td>
   <td>XXXX</td>
 </tr>
 <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>450</td>
   <td>XXXX</td>
 </tr>
  <tr class="Chi-to-filter">
   <td>XXXX</td>
   <td>450</td>
   <td>XXXX</td>
 </tr>

使用Foundation滑块解决此问题非常感谢任何详细的帮助。

谢谢。

在Nowres Rafed的回应之后：

FILTERING OF BIGDATA TABLE

经过多次尝试，这是我能够做到的。我有关于我的代码的解释和问题。正如您所看到的，我的表是使用此结构组织的，这是一个可展开的父行，如果单击箭头图标，它将提供许多子行。我想使用滑块来过滤父行和子行的“分数”列。我的分数存储在“手风琴菜单”中，而不是简单的<td>。

我想知道是否有更好的方法来过滤得分列？我使用了row.cells indice，它是否改变了使用row.cells名称（即“Score”）的速度？您认为我使用正确的方式来访问我的分数值，使用：$(colx.getElementsByClassName("accordion-title")).html();

此外，我将父行和子行的过滤划分为两个不同的循环，是否可以改进这部分？

非常感谢你的帮助。

Answer 1

您正在以错误的方式初始化插件，您的代码中没有名为slider的jQuery插件。

以下是您案例的工作示例：

$(function() {
    var $filter = $('.slider');

    $filter.foundation();
    $filter.on('moved.zf.slider', function() {
      var slideValue = $('#sliderOutput1').val();

      // Do your filtering here
      console.log(slideValue);
    });
});

直播：https://codepen.io/anon/pen/VbYZgO

只需添加您的列过滤代码即可。

<强>编辑：我认为你可以更简单：https://codepen.io/anon/pen/Qvjqyo

在每个score-value上添加accordion-title类，如果您希望区分子行和父行，可以扩展示例...

javascript - 滑块过滤表数字列

1 个答案: