こんにちは。
今回はテーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」です。
テーブルの列や行をドラッグ&ドロップで入れ替えられるスクリプトを紹介します。
テーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」
TableDragger
TableDraggerをダウンロードしてみよう！
https://github.com/sindu12jun/table-draggerにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
TableDraggerを設置してみよう！
html部分を記述します。
idを指定しますよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table id="table"> <thead> <tr> <th class='handle'>header1</th> <th class='handle'>header2</th> <th class='handle'>header3</th> </tr> </thead> <tbody> <tr> <td>conten1</td> <td>conten2</td> <td>conten3</td> </tr> </tbody> </table> |
先程ダウンロードしたtable-dragger.min.jsを/bodyの手前に読み込みます。
1 | <script src="js/table-dragger.min.js"></script> |
その下に下記のスクリプトを記述します。
先程指定したidを記述しますよ。
1 | tableDragger(document.querySelector("#table")); |
デフォルトだと列を入れ替えることしかできませんがオプションで行を入れ替えたり、列と行の両方を入れ替えることもできますよ。
JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
いかがでしたか。ユーザーやクライアントが入れ替えられるので便利ですね。
以上でテーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」でした。
