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

}）

私はスライダーの動きを検出する、この部分ですでに失敗しています...私はまた、.slide（）内で使用するために、この行（var elem = new Foundation.Slider(element, options);）のドキュメントに従って試してみました...成功しませんでした。

表の例：

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

どれ詳細なヘルプは、財団のスライダーを使用してこの問題を解決するために感謝以上になります。

ありがとうございます。 Nowres Rafedの応答の後

：多くの試行の後

FILTERING OF BIGDATA TABLE

、ここでは私が行うことができたものです。私は自分のコードについての説明と質問を持っています。 ご覧のとおり、私のテーブルは、この構造で構成されています。このアイコンは、矢印アイコンをクリックすると多くの子行を与える展開可能な親行です。親と子の両方の行の「スコア」列をフィルタリングするためにスライダを使用したいと思います。私の得点は「アコーディオンメニュー」に保存され、単純な<td>ではありません。

私は、のスコアカラムだけをフィルタリングするより良い方法があるのでしょうか？ row.cellsのインデックスを使用しましたが、row.cellsの名前（つまり「スコア」）で速度を変更しますか？ $(colx.getElementsByClassName("accordion-title")).html();

また、私は2つの異なるループで親子行のフィルタリングを分割しましたが、この部分を改善することは可能でしょうか？

ご協力いただきありがとうございます。

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

各accordion-titleにscore-valueクラスを追加し、あなたは子供と親の行を区別したい場合は、exempleを拡張することができます...