html上の表をソートできる

Question

前提・実現したいこと

htmlで多量のデータをソートできるようなページが作りたくて悪戦苦闘しています。

発生している問題・エラーメッセージ

https://thr3a.hatenablog.com/entry/20180707/1530955070
にあるテーブルソートのJSを使用したのですが、記載の通りに動かしてみてもうまくいきません。
（追記）説明不足で申し訳ありません。
本来であれば、filterの検索窓に入力すれば、下の表がソートされるはずなのですが、
設定しているはずのJSが動かず表がソートできない状況です。

<link href="css1.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.cyokodog.net/jquery.ex-table-filter/jquery.ex-table-filter.js"></script>
<script type="text/javascript" src="filtest.js"></script>


filter: <input type="text" id="myfilter">

<table id="mytable">
  <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メールアドレス</th>
        </tr>
  </thead>
    <tbody>
        <tr>
            <td>100</td>
            <td>山田太郎</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>101</td>
            <td>山田花子</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>102</td>
            <td>鈴木次郎</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>103</td>
            <td>佐藤美央</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>
</table>

#css1.css
table , td, th {
    border: 1px solid #595959;
    border-collapse: collapse;
}
td, th {
    padding: 3px;
    width: 200px;
    height: 25px;
}
th {
    background: #f0e6cc;
}
.even {
    background: #fbf8f0;
}
.odd {
    background: #fefcf9;
}

#filtest.js
$('#myTable').exTableFilter('#myfilter');

試したこと

HPにもある元のページにアクセスしたのですが、昨日よりHTMLを使い始めたため、どこがダメなのか全く理解できない状況です。

補足情報（FW/ツールのバージョンなど）

macでatomを使っています。

Comments

[m.ts10806]

「うまくいきません」とは？
https://teratail.com/help/question-tips#questionTips3-4

[pyamathon]

ご返信ありがとうございます。
追記した通り、JSが動かない状況です。よろしくお願いします。

[m.ts10806]

ブラウザの開発ツールのコンソールにエラーなど出ていませんか？

[pyamathon]

ご返信ありがとうございます。
cookieの注意は出ていますが、JSのエラーは出ていません。
よろしくお願いします。

Answer 1

<link rel="stylesheet" type="text/css" href="https://github.com/filipelinhares/ress">

HTMLの1行目はいらないんじゃいかなぁ。

その行でcookie関連のエラーが出てると思います。

参考にされているURLのコードに上記のコードは含まれていないと思います。
消したら、動くと思います。

上記コードが必要ならCOOKIEの警告を解消すべきかと。。。

###追記
scriptタグ内にJavaScriptコードを書くことで、HTML内で直接Javascriptコードを実行できますよ。
以下コード。
試してみてください。

<link href="css1.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.cyokodog.net/jquery.ex-table-filter/jquery.ex-table-filter.js"></script>
<!-- <script type="text/javascript" src="filtest.js"></script> -->


filter: <input type="text" id="myfilter">

<table id="mytable">
  <thead>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メールアドレス</th>
        </tr>
  </thead>
    <tbody>
        <tr>
            <td>100</td>
            <td>山田太郎</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>101</td>
            <td>山田花子</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>102</td>
            <td>鈴木次郎</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>103</td>
            <td>佐藤美央</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>
</table>

<script>
    $('#mytable').exTableFilter('#myfilter');
</script>

Comments

[pyamathon]

ご助言ありがとうございます。
おっしゃる通りにやってみたのですがやはり動きません。
よろしくお願いします。

[KazuSaka]

HTMLファイル内で直接、
$('#myTable').exTableFilter('#myfilter');
を書けば、動きますね。
ただ、外部JSファイルに書いたときには私のほうでも動きませんでした。
動かない理由はわかりませんでした。

[pyamathon]

ご返信ありがとうございます。
直接、というのはどこに記述するのでしょうか。
そのままペーストするとサイトに表示されるだけになってしまいます。
よろしくお願いします。

[KazuSaka]

コードを追記しました。
HTMLファイルの最後にscriptタグを追加してください。

[pyamathon]

ご返信ありがとうございました。
おかげさまで動くようになりました。
最後までご協力いただきありがとうございます。

[KazuSaka]

????

Answer 2

参照していらっしゃるサイト（https://thr3a.hatenablog.com/entry/20180707/1530955070）では、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.cyokodog.net/jquery.ex-table-filter/jquery.ex-table-filter.js"></script>

質問に書かれているHTMLでは、

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.ex-table-filter.js"></script>
<script type="text/javascript" src="filtest.js"></script>

となっていますが、Javascriptの内容は同じなのですか？
・元のサイトのJQueryは1.10.2、質問のHTMLのJQueryは3.2.1とバージョンが異なっていたりしませんか？
・元のサイトでは"filtest.js"を使っていませんが、必要なのですか？

「$('#myTable').exTableFilter('#myfilter');」という内容は、どこに（どのファイル）に書かれていますか？

私が気になる（トラブルの原因かもしれないと思う）のは、上記の箇所です。

Comments

[pyamathon]

ご返信ありがとうございます。
先ほど編集した際に別の部分を貼ってしまいました。
元のサイトにあるものをそのまま流用しているのですが、
最後フィルタの関数を使用するためのJSがfiltest.jsになっております。
そちらも合わせて追記致しました。
よろしくお願いします。