回答編集履歴
1
chousei
answer
CHANGED
|
@@ -76,4 +76,51 @@
|
|
|
76
76
|
|
|
77
77
|
- rowspan=0・・・tdを出力しない
|
|
78
78
|
- rowspan=1・・・rowspanを出力しないでtdを出力
|
|
79
|
-
- rowspan>1・・・rowspanを出力してtdを出力
|
|
79
|
+
- rowspan>1・・・rowspanを出力してtdを出力
|
|
80
|
+
|
|
81
|
+
# 完成形
|
|
82
|
+
```javascript
|
|
83
|
+
<script>
|
|
84
|
+
var a= [
|
|
85
|
+
["都道府県", "性別", "年齢"],
|
|
86
|
+
["神奈川県", "男性", 24],
|
|
87
|
+
["神奈川県", "女性", 24],
|
|
88
|
+
["東京都", "男性", 32],
|
|
89
|
+
["東京都", "女性", 18],
|
|
90
|
+
["東京都", "男性", 32],
|
|
91
|
+
["千葉県", "男性", 18],
|
|
92
|
+
["埼玉県", "男性", 48],
|
|
93
|
+
];
|
|
94
|
+
var b=a.map(currentValue=>currentValue.map(currentValue=>{
|
|
95
|
+
return {value:currentValue,rowspan:1};
|
|
96
|
+
}));
|
|
97
|
+
b.forEach((currentValue_0,index_0,array_0)=>{
|
|
98
|
+
currentValue_0.forEach((currentValue_1,index_1)=>{
|
|
99
|
+
for(var i=index_0+1;i<array_0.length;i++){
|
|
100
|
+
var nextValue=array_0[i][index_1];
|
|
101
|
+
if(currentValue_1.rowspan==0 ||
|
|
102
|
+
nextValue.value!==currentValue_1.value) break;
|
|
103
|
+
nextValue.rowspan=0;
|
|
104
|
+
currentValue_1.rowspan++;
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
109
|
+
var t1=document.querySelector('#t1');
|
|
110
|
+
b.forEach(currentValue_0=>{
|
|
111
|
+
var tr=document.createElement('tr');
|
|
112
|
+
t1.appendChild(tr);
|
|
113
|
+
currentValue_0.forEach(currentValue_1=>{
|
|
114
|
+
var rowspan=currentValue_1.rowspan;
|
|
115
|
+
if(rowspan>0){
|
|
116
|
+
var td=document.createElement('td');
|
|
117
|
+
td.textContent=currentValue_1.value;
|
|
118
|
+
if(rowspan>1) td.setAttribute('rowspan',rowspan);
|
|
119
|
+
tr.appendChild(td);
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
</script>
|
|
125
|
+
<table id="t1" border></table>
|
|
126
|
+
```
|