javascript - 滑块过滤表数字列

Question

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

我试图纠正和修改许多现有的example1,example2 ...但没有成功。

我使用 Zurb-Foundation 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");
        }
    })
})

})

我已经在这部分检测到我的滑块移动失败了...我还根据文档尝试了这条线（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>。

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

另外，我把父子行的过滤分成了两个不同的循环，这部分有没有可能改进？

非常感谢您的帮助。

Answer 1

您以错误的方式初始化插件，您的代码中没有名为滑块的 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

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