質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16501questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6732questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4032questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • jQueryプラグイン

    502questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

テーブルフィルタリング jQuery プラグイン 技術的相談

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 880

isseidayo

score 6

初めまして、ページ内でテーブルの中身をフィルタリングしたいと思っております。

参考サイト
http://www.cyokodog.net/jquery.ex-table-filter/demo.html#!Demo7

当方で書いたサンプルを以下に記載致します。
特に間違ってはいないようですが何かが足りないようで動きません。
2日間もハマってしまっております。。
大変お手数をおかけ致しますがご教示願いします。

以下
当方ソース

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js"></script>
</head>
<body>
<div class="form-horizontal">
    <label class="col-sm-1 control-label">CLASS:</label>
    <div class="col-sm-2">
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value=""/>all</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="core"/>core</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="ui"/>ui</label>
        </div>
    </div>
    <label class="col-sm-2 control-label">CATEGORY:</label>
    <div class="col-sm-4">
        <select class="category-filter form-control">
            <option></option>
            <option>Events</option>
            <option>Metaplugin</option>
            <option>Utilities</option>
        </select>
    </div>
    <label class="col-sm-1 control-label">QTY:</label>
    <div class="col-sm-2">
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="26"/>26</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="130"/>130</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="327"/>327</label>
        </div>
    </div>
</div>
<table class="table data">
    <thead>
        <tr>
            <th class="no">No</th>
            <th class="class">CLASS</th>
            <th class="category">CATEGORY</th>
            <th class="qty num">QTY</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>core</td>    <td>Ajax</td><td class="num">203</td></tr>
        <tr><td>2</td><td>core</td>    <td>Animation and Effects</td><td class="num">292</td></tr>
        <tr><td>3</td><td>core</td>    <td>Browser Tweaks</td><td class="num">78</td></tr>
        <tr><td>4</td><td>core</td>    <td>Data</td><td class="num">139</td></tr>
        <tr><td>5</td><td>core</td>    <td>DOM</td><td class="num">141</td></tr>
        <tr><td>6</td><td>ui</td>     <td>Widgets</td><td class="num">242</td></tr>
        <tr><td>7</td><td>core</td>    <td>Events</td><td class="num">130</td></tr>
        <tr><td>8</td><td>ui</td>      <td>Forms</td><td class="num">362</td></tr>
        <tr><td>9</td><td>core</td>    <td>Integration</td><td class="num">102</td></tr>
        <tr><td>10</td><td>core</td>   <td>JavaScript</td><td class="num">148</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>11</td><td>core</td>   <td>jQuery Extensions</td><td class="num">219</td></tr>
        <tr><td>12</td><td>ui</td>     <td>Layout</td><td class="num">183</td></tr>
        <tr><td>13</td><td>ui</td>     <td>Media</td><td class="num">129</td></tr>
        <tr><td>14</td><td>ui</td>     <td>Menus</td><td class="num">92</td></tr>
        <tr><td>15</td><td>core</td>   <td>Metaplugin</td><td class="num">22</td></tr>
        <tr><td>16</td><td>ui</td>     <td>Navigation</td><td class="num">148</td></tr>
        <tr><td>17</td><td>ui</td>     <td>Tables</td><td class="num">74</td></tr>
        <tr><td>18</td><td>ui</td>     <td>User Interface</td><td class="num">644</td></tr>
        <tr><td>19</td><td>core</td>   <td>Utilities</td><td class="num">322</td></tr>
        <tr><td>20</td><td>ui</td>      <td>Drag-and-Drop</td><td class="num">32</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>21</td><td>ui</td>     <td>Windows and Overlays</td><td class="num">102</td></tr>
    </tbody>    
    <tfoot>
        <tr>
            <th colspan="3"/>
            <th id="sum" class="num"> </th>
        </tr>
    </tfoot>
</table>
<script>
$(function(){
    $('table.data').exTableFilter({
        filters : {
            1 : 'input.class-filter',
            2 : 'select.category-filter',
            3 : 'input.qty-filter'
        }
    });
});
</script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yuki-saito

    2017/10/25 16:54

    いえいえ、ほぼサイトの内容って感じなんですね!既に回答してくださっている方がいらっしゃるようなのでよかったです。

    キャンセル

  • isseidayo

    2017/10/25 17:16

    とりあえずサイトの内容でテストしてからと思っていて最初からつまづきました。。

    キャンセル

  • kimurayu

    2017/10/25 17:32

    コンソールにエラーメッセージ出ますか?

    キャンセル

回答 5

checkベストアンサー

+2

srcの読み込みがhttpとhttpsが混じってて読み込めていないのでは
https://github.com/cyokodog/jquery.ex-table-filter
からダウンロードしてダウンロードしたファイルから読み込むようにしてみて下さい

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/25 17:45

    ありがとうございました。解決致しました。

    キャンセル

+2

DOMのロードを待ってみては。

$(function(){
    $('table.data').exTableFilter({
        filters : {
            1 : 'input.class-filter',
            2 : 'select.category-filter',
            3 : 'input.qty-filter'
        }
    });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/25 17:12

    こちらの方法では解決致しませんでした。

    キャンセル

+2

実行時点でtable.dataがまだ存在していないので、<script>をtableの後ろに移動してください。

-- 追記。
見てみると、text/plainで返ってきているので、直接https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.jsを参照するのではなく、ダウンロードして使ってみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/25 17:15

    質問ソースも変更しました。<script>をtableの後ろに持って行きましたが動きませんでした。

    キャンセル

+2

<script src="https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js"></script>

これが原因です。

Refused to execute script from 'https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.


というエラーがコンソールに出るはずです。
https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js
にアクセスしてjsをコピーしてローカル jquery.ex-table-filter.jsを置くかscript タグに直接記述してください。そうすると動きます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/25 17:45

    ありがとうございます!ローカルにjquery.ex-table-filter.jsを持ってきたら動きました。

    キャンセル

0

沢山回答をいただきまして解決致しました。

httpとhttpsの混在と最初はtable.dataがまだ存在していないので、<script>をtableの後ろに移動を行いました。
本サイトがhttpsでしたのでjquery.min.jsはhttpsのCDN仕様とjquery.ex-table-filter.jsはローカルに持って持ってきました

皆様本当にありがとうございました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.ex-table-filter.js"></script>
</head>
<body>
<div class="form-horizontal">
    <label class="col-sm-1 control-label">CLASS:</label>
    <div class="col-sm-2">
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value=""/>all</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="core"/>core</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="ui"/>ui</label>
        </div>
    </div>
    <label class="col-sm-2 control-label">CATEGORY:</label>
    <div class="col-sm-4">
        <select class="category-filter form-control">
            <option></option>
            <option>Events</option>
            <option>Metaplugin</option>
            <option>Utilities</option>
        </select>
    </div>
    <label class="col-sm-1 control-label">QTY:</label>
    <div class="col-sm-2">
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="26"/>26</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="130"/>130</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="327"/>327</label>
        </div>
    </div>
</div>
<table class="table data">
    <thead>
        <tr>
            <th class="no">No</th>
            <th class="class">CLASS</th>
            <th class="category">CATEGORY</th>
            <th class="qty num">QTY</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>core</td>    <td>Ajax</td><td class="num">203</td></tr>
        <tr><td>2</td><td>core</td>    <td>Animation and Effects</td><td class="num">292</td></tr>
        <tr><td>3</td><td>core</td>    <td>Browser Tweaks</td><td class="num">78</td></tr>
        <tr><td>4</td><td>core</td>    <td>Data</td><td class="num">139</td></tr>
        <tr><td>5</td><td>core</td>    <td>DOM</td><td class="num">141</td></tr>
        <tr><td>6</td><td>ui</td>     <td>Widgets</td><td class="num">242</td></tr>
        <tr><td>7</td><td>core</td>    <td>Events</td><td class="num">130</td></tr>
        <tr><td>8</td><td>ui</td>      <td>Forms</td><td class="num">362</td></tr>
        <tr><td>9</td><td>core</td>    <td>Integration</td><td class="num">102</td></tr>
        <tr><td>10</td><td>core</td>   <td>JavaScript</td><td class="num">148</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>11</td><td>core</td>   <td>jQuery Extensions</td><td class="num">219</td></tr>
        <tr><td>12</td><td>ui</td>     <td>Layout</td><td class="num">183</td></tr>
        <tr><td>13</td><td>ui</td>     <td>Media</td><td class="num">129</td></tr>
        <tr><td>14</td><td>ui</td>     <td>Menus</td><td class="num">92</td></tr>
        <tr><td>15</td><td>core</td>   <td>Metaplugin</td><td class="num">22</td></tr>
        <tr><td>16</td><td>ui</td>     <td>Navigation</td><td class="num">148</td></tr>
        <tr><td>17</td><td>ui</td>     <td>Tables</td><td class="num">74</td></tr>
        <tr><td>18</td><td>ui</td>     <td>User Interface</td><td class="num">644</td></tr>
        <tr><td>19</td><td>core</td>   <td>Utilities</td><td class="num">322</td></tr>
        <tr><td>20</td><td>ui</td>      <td>Drag-and-Drop</td><td class="num">32</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>21</td><td>ui</td>     <td>Windows and Overlays</td><td class="num">102</td></tr>
    </tbody>    
    <tfoot>
        <tr>
            <th colspan="3"/>
            <th id="sum" class="num"> </th>
        </tr>
    </tfoot>
</table>
<script>
$(function(){
    $('table.data').exTableFilter({
        filters : {
            1 : 'input.class-filter',
            2 : 'select.category-filter',
            3 : 'input.qty-filter'
        }
    });
});
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/25 18:35

    自力解決でなければ、一番参考になった回答にベストアンサーをつけてください。

    キャンセル

  • 2017/10/25 19:07

    大変失礼しました。まだ初心者でして次回から気をつけます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    javascript セレクターの指定方法を教えて下さい。

    下記の<TABLE>に配置した<FORM>で 最後の列にあるinput[radio]を選択された際に同じ行にあるinputの値を変更したいと考えています、 具体的には 一行全ての

  • 解決済

    jQueryをもっとスマートにかけないでしょうか。

    特定のラジオボタンにチェックをしたら他の項目を表示/非表示にするjQueryを書きました。 一応動くのですが、見ての通り頭悪い書き方になってしまいました。 さらに出来れば、

  • 解決済

    jqueryのcloneでテーブルごとコピー

    jqueryのcloneでtable要素ごとコピーしたいのですが、その際name属性も変更したいのですが、tableの子要素の名前属性はどのように変更したら良いのでしょうか。

  • 解決済

    選択済みのラジオボタンを押すと選択が解除される

    選択済みのラジオボタンを押すと選択が解除される 上記の通りの実装を考えております。下記のソースコードのようにラジオボタンが1セットのみでしたら、下記の通りのソースコードでも問題が

  • 解決済

    JavascriptからHTMLフォームの送信内容を取得したい

    HTMLフォームにテキストボックスやラジオボタン、チェックボックスなど様々なタイプの入力欄があり、Javascript + jQuery で name ごとの値を取得したいと考えて

  • 解決済

    checkBoxをradio OR selectに変える方法

    こんにちわ。 題名にもある通り、 <input type="checkbox">を<select>か<input type="radio">に変更してほしい(一つしか選択できない状

  • 解決済

    jQueryの絞り込み検索(3つの条件 or検索)について

     前提・実現したいこと 画像を3つの条件(or検索)で表示したいと思っています。 2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を

  • 解決済

    jQueryでformの値を取得したい

    サイトに絞り込みとソート機能を実装しようと考えています。 具体的には、 checkboxにチェックが入っているものを表示し、 複数ある場合は値が大きい方を上に表示する感じになり

同じタグがついた質問を見る

  • JavaScript

    16501questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6732questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4032questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • jQueryプラグイン

    502questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。