以前も質問したのですが、その後、頂いた方法でいろいろ検証しましたが、
スキル不足でわからず再度質問させていただきます。

JSで結合なしのテーブルを作る方法はわかったのですが、縦方向の結合する方法がわからず困ってます。

#作ろうとしてるもの
オリジナルのエディタを作ってます。
その中で、独自ルールで書いたテーブルを配列にして、結合する処理を書こうとしてます。
最後にまとめて出力するため、文字列でデータを加工してます。

#元になるデータ

javascript
1let array = [
2    ["都道府県", "性別", "年齢"],
3    ["神奈川県", "男性", 24],
4    ["神奈川県", "女性", 24],
5    ["東京都", "男性", 32],
6    ["東京都", "女性", 18],
7    ["千葉県", "男性", 18],
8    ["埼玉県", "男性", 48]
9]

#最初に書いたコード結合なしのコード

javascript
1let result = ''
2
3result = '<table>'
4
5for (let line = 0; line < array.length; line++) {
6
7    result += '<tr>'
8    for (let i = 0; i < line.length; i++) {
9        if(line == 0){
10            result += '<th>' + array[line][i] + '</th>'
11        } else {
12            result += '<td>' + array[line][i] + '</td>'
13        }
14    }
15    result += '</tr>'
16}
17
18result += '</table>\n'
19
20console.log(result)
21
22const div = document.getElementById("root");
23
24div.innerHTML = result;

#教えていただいたコード
こちらですと1列目がうまく結合されます。
ただ3列目以降も結合したく、どのように調整すればいいかわからず苦戦してます。

https://jsfiddle.net/jun68ykt/zm657e0y/5/

javascript
1const tableRows =　array.map((row, i, ary) => {
2  let tr = "  <tr>";
3  const prevRow = i > 0 ? ary[i-1] : ["", ""];
4
5  if (prevRow[0] === row[0] || prevRow[1] === row[1]) {
6    const cell = `\n    <td>${row[prevRow[0] === row[0] ? 1 : 0]}</td>`;
7    tr += cell;
8  } 
9  else {
10    row.forEach((str, j) => {
11      let cell = `\n    <${i > 0 ? 'td' : 'th'}`;
12      let rowSpan = 1;
13      for (let k=i+1; k < array.length; ++ k) {
14        if (array[k][j] === str) 
15          rowSpan ++;
16        else
17          break;
18      }      
19      if (rowSpan > 1)
20        cell += ` rowspan="${rowSpan}"`;      
21      cell += `>${str}</${i > 0 ? 'td' : 'th'}>`;
22      tr += cell;
23    });
24  }  
25  tr += "\n  </tr>";
26
27  return tr;
28});
29
30const tableString = `<table>\n${tableRows.join("\n")}\n</table>`;
31
32console.log(tableString);
33
34const div = document.getElementById("root");
35
36div.innerHTML = tableString;

#出力先

html
1<div id="root"></div>

#完成イメージ

html
1<div id="root">
2<table>
3    <tr>
4        <th>都道府県</th>
5        <th>性別</th>
6        <th>年齢</th>
7    </tr>
8    <tr>
9        <td rowspan="2">神奈川県</td>
10        <td>男性</td>
11        <td rowspan="2">24</td>
12    </tr>
13    <tr>
14      <td>女性</td>
15    </tr>
16    <tr>
17        <td rowspan="2">東京都</td>
18        <td>男性</td>
19        <td>32</td>
20    </tr>
21    <tr>
22        <td>女性</td>
23        <td rowspan="2">18</td>
24    </tr>
25    <tr>
26        <td>千葉県</td>
27        <td rowspan="2">男性</td>
28    </tr>
29    <tr>
30        <td>埼玉県</td>
31        <td>48</td>
32    </tr>
33</table>
34</div>

think49

2019/07/01 23:49

結合情報はどこから得るのですか。

think49

2019/07/02 03:31

縦方向のセル値が一致した時にrowspanでまとめるのですね。

行動規範の内容に同意します

回答1件

ちょっと冗長ですが例えばこんな感じに配列を用意してみては？

javascript
1var a= [
2    ["都道府県", "性別", "年齢"],
3    ["神奈川県", "男性", 24],
4    ["神奈川県", "女性", 24],
5    ["東京都", "男性", 32],
6    ["東京都", "女性", 18],
7    ["東京都", "男性", 32],
8    ["千葉県", "男性", 18],
9    ["埼玉県", "男性", 48],
10];
11var b=a.map(currentValue=>currentValue.map(currentValue=>{
12  return {value:currentValue,rowspan:1};
13}));
14b.forEach((currentValue_0,index_0,array_0)=>{
15  currentValue_0.forEach((currentValue_1,index_1)=>{
16    for(var i=index_0+1;i<array_0.length;i++){
17      var nextValue=array_0[i][index_1];
18      if(currentValue_1.rowspan==0 ||
19         nextValue.value!==currentValue_1.value) break;
20      nextValue.rowspan=0;
21      currentValue_1.rowspan++;
22    }
23  });
24});
25console.log(b);

結果

[
  [
    {"value":"都道府県","rowspan":1},
    {"value":"性別","rowspan":1},
    {"value":"年齢","rowspan":1},
  ],
  [
    {"value":"神奈川県","rowspan":2},
    {"value":"男性","rowspan":1},
    {"value":24,"rowspan":2},
    ],
  [
    {"value":"神奈川県","rowspan":0},
    {"value":"女性","rowspan":1},
    {"value":24,"rowspan":0},
    ],
  [
    {"value":"東京都","rowspan":3},
    {"value":"男性","rowspan":1},
    {"value":32,"rowspan":1},
    ],
  [
    {"value":"東京都","rowspan":0},
    {"value":"女性","rowspan":1},
    {"value":18,"rowspan":1},
    ],
  [
    {"value":"東京都","rowspan":0},
    {"value":"男性","rowspan":3},
    {"value":32,"rowspan":1},
    ],
  [
    {"value":"千葉県","rowspan":1},
    {"value":"男性","rowspan":0},
    {"value":18,"rowspan":1},
    ],
  [
    {"value":"埼玉県","rowspan":1},
    {"value":"男性","rowspan":0},
    {"value":48,"rowspan":1},
    ],
  ]

rowspan=0・・・tdを出力しない
rowspan=1・・・rowspanを出力しないでtdを出力
rowspan>1・・・rowspanを出力してtdを出力

完成形

javascript
1<script>
2var a= [
3    ["都道府県", "性別", "年齢"],
4    ["神奈川県", "男性", 24],
5    ["神奈川県", "女性", 24],
6    ["東京都", "男性", 32],
7    ["東京都", "女性", 18],
8    ["東京都", "男性", 32],
9    ["千葉県", "男性", 18],
10    ["埼玉県", "男性", 48],
11];
12var b=a.map(currentValue=>currentValue.map(currentValue=>{
13  return {value:currentValue,rowspan:1};
14}));
15b.forEach((currentValue_0,index_0,array_0)=>{
16  currentValue_0.forEach((currentValue_1,index_1)=>{
17    for(var i=index_0+1;i<array_0.length;i++){
18      var nextValue=array_0[i][index_1];
19      if(currentValue_1.rowspan==0 ||
20         nextValue.value!==currentValue_1.value) break;
21      nextValue.rowspan=0;
22      currentValue_1.rowspan++;
23    }
24  });
25});
26window.addEventListener('DOMContentLoaded', function(e){
27  var t1=document.querySelector('#t1');
28  b.forEach(currentValue_0=>{
29    var tr=document.createElement('tr');
30    t1.appendChild(tr);
31    currentValue_0.forEach(currentValue_1=>{
32      var rowspan=currentValue_1.rowspan;
33      if(rowspan>0){
34        var td=document.createElement('td');
35        td.textContent=currentValue_1.value;
36        if(rowspan>1) td.setAttribute('rowspan',rowspan);
37        tr.appendChild(td);
38      }
39    });
40  });
41});
42</script>
43<table id="t1" border></table>