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>
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>