こんにちは。
今回はテーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」です。
テーブルの列や行をドラッグ&ドロップで入れ替えられるスクリプトを紹介します。
※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。
テーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」
TableDragger
TableDraggerをダウンロードしてみよう！
https://github.com/sindu12jun/table-draggerにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
TableDraggerを設置してみよう！
html部分を記述します。
idを指定しますよ。
[html]
| header1 | header2 | header3 |
|---|---|---|
| conten1 | conten2 | conten3 |
[/html]
先程ダウンロードしたtable-dragger.min.jsを/bodyの手前に読み込みます。
[html]
[/html]
その下に下記のスクリプトを記述します。
先程指定したidを記述しますよ。
[javascript]
tableDragger(document.querySelector(“#table”));
[/javascript]
デフォルトだと列を入れ替えることしかできませんがオプションで行を入れ替えたり、列と行の両方を入れ替えることもできますよ。
JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
ユーザーやクライアントが入れ替えられるので便利ですね。
以上でテーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」でした。
