HTML: ul,ol,li タグ: JavaScript (1)
JavaScript 基本的なサンプル
li のインデックス値など
- TestJS_querySelectorAll_li01.html
querySelectorAll() のサンプル。ul-liリストの li を取得。 - TestJS_ul_li_index01.html
クリックされた li のインデックス値。 - TestJS_querySelectorAll_li02.html
クリックされた li のインデックス値。
ul-li-ul-li のようにネストする場合。querySelectorAll() のサンプル。
JavaScript で li リストを作成する
- TestJS_ul_li_create01.html
ul,liのリストをJavaScriptで作る。 - TestJS_table_create_textarea01.html
テキストデータを ul,li の HTML に変換する。
JavaScript ツールサンプル (1) - TestJS_ul_li_create_color01.html
ul,liの色リストをJavaScriptで作る。 - TestJS_color_select_li02.html
色選択のサンプル。ラジオボタン(input type="radio")で作った例。 ラジオボタンのチェックマークを非表示にし、選択された色を強調表示する。
inputタグ
色選択のサンプル。上のサンプルをポップアップ表示にしたもの。
CSS 色の指定(3) - JavaScript
li 要素を並べ替える
- TestJS_sort_ul_li_01.html
li 要素の textContent の文字列を見て並べ替える。
文字列の大小を比較する
データを並べ替える (ソート)
li 要素をドラッグ操作で並べ替える。
draggable 属性のサンプル。
draggable 属性でドラッグ操作する
li のテキストを入力する
TestJS_input_inline01.htmlインラインで項目名を変更するサンプル。項目名がクリックされると、 その部分に input タグを挿入してテキスト編集モードにする。
inputタグ
ツリー表示
TestJS_ul_li_tree02.htmlul,li でツリー表示。フォルダを開いたり閉じたりする。
ul,ol,li タグ: JavaScript ツリービュー