2次元配列の内容を、DOM操作で入れ子の順序リスト(ol要素)に表示

JavaScriptにおいて、2次元配列の内容を、ユーザー定義関数forループ文、DOM操作などを使い、入れ子の順序リスト(ol要素)に表示するサンプル。

実装例

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sample" ).innerHTML = funcList();
}
function funcList() {
    var $arr = new Array(
        [ "項目1-1", "項目1-2", "項目1-3" ],
        [ "項目2-1", "項目2-2", "項目2-3" ],
        [ "項目3-1", "項目3-2", "項目3-3" ],
        [ "項目4-1", "項目4-2", "項目4-3" ],
        [ "項目5-1", "項目5-2", "項目5-3" ]
    );
    var $list = '<ol>\n';
    for( var $counterVarA = 0; $counterVarA < $arr.length; $counterVarA++ ) {
        $list += '<li>';
        $list += '<ol>';
        for( var $counterVarB = 0; $counterVarB < $arr[$counterVarA].length; $counterVarB++ ) {
            $list += '<li>';
            $list += $arr[$counterVarA][$counterVarB];
            $list += '</li>';
        }
        $list += '</ol>';
        $list += '</li>\n';
    }
    $list += '</ol>';
    return $list;
}
</script>

HTML

<div id="sample"></div>

スポンサード リンク

カテゴリー: JavaScript, リスト, 逆引き, 配列 パーマリンク