ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
JavaScriptでテーブルのソート機能を作ろう
JavaScriptでテーブルのデータを並べ替える機能を実装してみます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(16)
質問と回答
(7)
未完了
#01 テーブルのソート機能を作ろう
(02:55)
無料公開中
完成版、仕様の確認
必要となる知識
対応ブラウザ
ファイルの作成
未完了
#02 HTMLのマークアップをしていこう
(02:52)
無料公開中
index.html
未完了
#03 テーブルのスタイルを整えよう
(02:56)
無料公開中
styles.css
未完了
#04 クリックイベントを設定しよう
(02:31)
無料公開中
イベントの設定
未完了
#05 sort()の仕組みを理解しよう
(02:30)
sort()の仕様
サンプル
未完了
#06 行要素を取得していこう
(01:58)
行要素の取得
未完了
#07 行要素を並び替えてみよう
(02:14)
並べ替え処理
未完了
#08 結果を画面に反映させてみよう
(02:49)
tbody内の書き換え
未完了
#09 大文字が先に並ばないようにしよう
(01:10)
並べ替え処理の調整
未完了
#10 数値の並び替えをしてみよう
(02:38)
数値の並べ替え
未完了
#11 並び順を反転させてみよう
(02:49)
反転処理
クラスの付与
未完了
#12 FontAwesomeのアイコンをつけよう
(02:54)
FontAwesomeの導入
アイコンの表示
未完了
#13 アイコンのスタイルを整えよう
(01:44)
アイコンのスタイリング
未完了
#14 描画処理をリファクタリングしよう
(02:23)
描画処理のリファクタリング
未完了
#15 ソート処理をリファクタリングしよう
(02:30)
ソート処理のリファクタリング
未完了
#16 アプリを完成させよう
(02:40)
イベント処理のリファクタリング
#02 HTMLのマークアップをしていこう
thead タグ、tbody タグを使う場合と使わない場合で挙動や可読性で違いがありますか?
2017年10月27日
#05 sort()の仕組みを理解しよう
ソート部分のプログラムがわかりません
2017年10月27日
#08 結果を画面に反映させてみよう
let _a = a.children[col].textContent; 辺りの部分でエラーが出ます。
2022年1月27日
#10 数値の並び替えをしてみよう
if (_a > _b) { の処理がおかしいと出る
2022年1月27日
#12 FontAwesomeのアイコンをつけよう
FontAwesome 5にするとアイコンが表示されません
2022年1月27日
#16 アプリを完成させよう
要素を取得する関数はどれを使えばいいのでしょうか?
2017年10月27日
関数にまとめたらプログラムが動かなくなった
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2016年8月25日
バージョン情報
JavaScript
関連キーワード
(6)
ミニプログラム
(142)
初心者向け
(367)
JavaScript
(147)
ウェブサイト構築
(155)
HTML5
(32)
CSS3
(20)
このレッスンを共有する