こんにちは。
今回はテーブルの列や行をドラッグ&ドロップで入れ替えられる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」でした。
Amazonで欲しい商品を安く手に入れる方法！
Amazonでお得に買い物をしたいならAmazonギフト券の現金チャージするのがおすすめです。
現金チャージする度に最大2.5%分のポイントが貯まります。
現在キャンペーン中なので、初めて5,000円以上の現金チャージする場合は1,000円分のポイントがもらえます。
いつキャンペーンが終了するか分からないので、Amazonをよく利用される方はいますぐにやっておきたいですね。
