検索と並び替えが出来る表が作りたい html

と思ったが

思わぬトラップにはまった

完成図

ID	エンチャント	エメラルド
1	修繕	23
2	耐久力	48
3	耐久力	22
4	修繕	10

テーブルのヘッダーをクリックすると並び替え

検索欄に「修繕」とか入れると絞り込み

参考サイト

List.jsでHTMLのテーブルをソートする - Qiita

Search, sort, filters, flexibility to tables, list and more! - List.js

 内容としては

<div id="librarian">
  <input class="search" placeholder="検索" />
    <br/>
    <br/>
  <table>
    <thead>
      <tr>
        <th class="sort" data-sort="id">ID</th>
        <th class="sort" data-sort="enchant">エンチャント</th>
        <th class="sort" data-sort="emerald">エメラルド</th>
      </tr>
    <tbody class="list">
      <tr>
        <td class="id">1</td>
        <td class="enchant">修繕</td>
        <td class="emerald">23</td>
      </tr>
      <tr>
        <td class="id">2</td>
        <td class="enchant">耐久力</td>
        <td class="emerald">48</td>
      </tr>
      <tr>
        <td class="id">3</td>
        <td class="enchant">耐久力</td>
        <td class="emerald">22</td>
      </tr>
      <tr>
        <td class="id">4</td>
        <td class="enchant">修繕</td>
        <td class="emerald">10</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<script>
var options = {
  valueNames: [ 'id', 'enchant', 'emerald' ]
};
var userList = new List('librarian', options);
</script>

<style>
.sort.desc:after {
  content:"▼";
}
.sort.asc:after {
  content:"▲";
}
</style>

ここまでは参考サイトの通り

はてなブログだと表のデザインは自動でされる

使用しているテンプレート次第

問題はこの後だ

このコードを

はてなブログの

HTML編集に

そのままコピペする

すると

javascriptが動かない

改めて

HTML編集 

をよく見てみると

tbodyタブが居ない

消えた、と言ったほうがいいか

<tbody class="list">

を元に

リストを作成しているらしい

めちゃくちゃ重要

tbodyが消えて

テーブル全体が

theadに囲われていた

2020/06/11追記

</thead>忘れてたｗｗｗ

コピペしたのち

書き変わってしまった部分を

修正したら

動作するようになった

はてなブログで

HTML編集をするときは

気を付けたい