2018年9月11日火曜日
Javascript 配列から表を動的に作成
1. これが分かり易い。
http://proengineer.internous.co.jp/content/columnfeature/8632
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div id="table"></div>
<script type="text/javascript">
// 表の動的作成
function makeTable(data, tableId){
// 表の作成開始
var rows=[]; var table = document.createElement("table");
// 表に2次元配列の要素を格納
for(i = 0; i < data.length; i++){
rows.push(table.insertRow(-1)); // 行の追加
for(j = 0; j < data[0].length; j++){
cell=rows[i].insertCell(-1);
cell.appendChild(document.createTextNode(data[i][j]));
// 背景色の設定
if(i==0){
cell.style.backgroundColor = "#bbb"; // ヘッダ行
}else{
cell.style.backgroundColor = "#ddd"; // ヘッダ行以外
}
}
}
// 指定したdiv要素に表を加える
document.getElementById(tableId).appendChild(table);
}
window.onload = function(){
// 表のデータ
var data = [[11, 12, 13],
[21, 22, 23],
[31, 32, 33],
[41, 42, 43]];
// 表の動的作成
makeTable(data,"table");
};
</script>
</body>
</html>
2. これが理解したいのだが。
https://teratail.com/questions/122504
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="underscore.js"></script>
</head>
<body>
<!--ここから下がUnderscore.jsを使用した処理-->
<script>
var temp_str = "<% var list = [" +
"{ name: 'ムスカ', tag: ['趣味１','趣味２','趣味３'], desc: ['幼女','射撃','目があああ'] }, " +
" { name: 'ドーラ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['育児','指揮','度胸','上手そうに食べる'] }," +
"{ name: '親方', tag: ['趣味１','趣味２','趣味３'], desc: ['シカと','ゲンコツ','シャツ破り'] }," +
"{ name: 'シータ', tag: ['趣味１','趣味２'], desc: ['掃除','バルス'] }];" + "%>" +
"
<% _.each(list, function(val){ %>" +
"<h3><%= val.name %></h3>" +
"<dl>" +
"<% for(let i = 0; i < val.tag.length; i++){ %>" +
"<dt><%= val.tag[i] %></dt>" +
"<dd><%= val.desc[i] %></dd>" +
"<% } %>" +
"</dl>" +
"<% }); %>"; var temp = _.template(temp_str); var html = temp(); document.body.innerHTML = html;
</script>
<!--ここから下がUnderscore.js無しの処理-->
<script> const list = [
{ name: 'ムスカ', tag: ['趣味１','趣味２','趣味３'], desc: ['幼女','ロムスカ・パロ・ウル','目があああ'] },
{ name: 'ドーラ', tag: ['趣味１'], desc: ['ハムを食いちぎる'] },
{ name: '親方', tag: ['趣味１','趣味２','趣味３'], desc: ['シカと','ゲンコツ','シャツ破り'] },
{ name: 'シータ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['掃除','バルス','スルー','物探し'] } ]; //HTML内埋め込みとの境界線
let frag_node = document.createDocumentFragment();
const p = document.createElement("p");
const line = document.createTextNode("-------ここから下がUnderscore.js無しの処理-------");
p.appendChild(line);
frag_node.appendChild(p);
for(let i in list){ //h3 const h3 = document.createElement("h3");
const name = document.createTextNode(list[i].name); h3.appendChild(name);
frag_node.appendChild(h3); //dl
const dl = document.createElement("dl");
for(const j in list[i].tag){ //dt const dt = document.createElement("dt");
const tag = document.createTextNode(list[i].tag[j]);
dt.className = "tag";
dt.appendChild(tag); dl.appendChild(dt); //dd
const dd = document.createElement("dd");
const desc = document.createTextNode(list[i].desc[j]);
dd.className = "desc";
dd.appendChild(desc); dl.appendChild(dd); } frag_node.appendChild(dl);
}
document.body.appendChild(frag_node);
</script>
</body>
</html>
3. 昔ながらの方法 その１
＜td>タグごとに修飾したいんだけで、これでも難しいなぁ！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>180913 TEST</title>
</head>
<body>
<h2>☆車のパーツ名称</h2>
<table id="001" class="tableCreated"></table>
<style type="text/css">
.table{
border: 1px solid black;
color:#fff8dc;
}
table td {
border: 1px solid #5f9ea0;
background-color: #fffff0;
padding: 5px 10px;
color:black;
}
</style>
<script type="text/javascript">
window.onload = function makeTable(carParts, tableId){
var table = "";
// 表のデータ
var carParts = [
["ハンドル","Steering Wheel","Don't text while you're behind the wheel!"],
["バック・ミラー","rear-view-mirror",""],
["アクセル(ブレーキ）ペダル","gas (brake) pedal",""],
["バッテリー", "battery"," "],
["バッテリーが上がる ","battery ","My battery is dying. (My battery is dead.) "],
["シートベルト ","seat belt / buckle "," "],
["シートベルトをする ","buckle up ","Buckle up when you're driving. "],
[" "," "," "],
[" "," "," "],
[" "," "," "],
[" "," "," "],
]
alert(carParts.length)
// 表の動的作成
for(var i = 0; i < carParts.length; i ++){
table += "<tr>"
for(j = 0; j < carParts[0].length; j++){
table += "<td>" + carParts[i][j] + "</td>" // "+="は、 加算代入演算子 a +=b -> a = a +b
}
table += "</tr>"
}
//document.write("<table>" + table + "</table>");
document.getElementById("001").innerHTML = table;
}
</script>
</body>
</html>
◆．参考になるなぁ
JavaScriptでHTMLをダイナミックに書き換える
http://www.atmarkit.co.jp/ait/articles/0807/02/news144.html
◆. こんなのもあるなぁ。
There are numerous ways to create table using Javascript !!
http://titi-fe.hatenablog.com/entry/2016/02/15/152723
<script>
// tableタグ要素を作成
var table = document.createElement('TABLE');
table.id = 'nametbl';
table.border = '1';
// TBODYタグ要素作成し、TABLEタグ要素に追加
var tbody = document.createElement('TBODY');
table.appendChild(tbody);
// 1行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr1 = document.createElement('TR');
var td1_1 = document.createElement('TD');
td1_1.appendChild(document.createTextNode('性'));
var td1_2 = document.createElement('TD');
td1_2.appendChild(document.createTextNode('名'));
td1_1.className = 'theadercell';
td1_2.className = 'theadercell';
tr1.appendChild(td1_1);
tr1.appendChild(td1_2);
tbody.appendChild(tr1);
// 2行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr2 = document.createElement('TR');
var td2_1 = document.createElement('TD');
td2_1.appendChild(document.createTextNode('山田'));
var td2_2 = document.createElement('TD');
td2_2.appendChild(document.createTextNode('太郎'));
tr2.appendChild(td2_1);
tr2.appendChild(td2_2);
tbody.appendChild(tr2);
// 3行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr3 = document.createElement('TR');
var td3_1 = document.createElement('TD');
td3_1.appendChild(document.createTextNode('佐藤'));
var td3_2 = document.createElement('TD');
td3_2.appendChild(document.createTextNode('花子'));
tr3.appendChild(td3_1);
tr3.appendChild(td3_2);
tbody.appendChild(tr3);
// tableタグ要素をBODYタグに追加
document.body.appendChild(table);
</script>
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿