JSで配列から結合したtableを出力したい

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

数が増えた場合になるとどうなるのか。

javascript
1let array = [
2	["都道府県", "性別", "年齢", "誕生月"],
3	["神奈川県", "男性", 24, 8],
4	["神奈川県", "女性", 24, 12],
5	["東京都", "男性", 32, 6],
6	["東京都", "女性", 40, 2],
7	["千葉県", "男性", 18, 2],
8	["埼玉県", "男性", 48, 9]
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)

最終的に下記のようなhtmlデータにしたいです

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

yambejp

2019/04/23 08:19

具体的にほしい結果をhtmlとして提示してください

yambejp

2019/04/23 08:30

１列目も２列目も同じデータがあると２行なのに１行で表示されてしまうのは仕様として問題ないのですか？（今回の例だと神奈川、男性）

kumakuma112

2019/04/23 08:33

例題が良くなかったので、再度修正いたしました。すみません。

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

回答3件

じゃぁ横方向は見捨てて、（関数は）1行で、

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title></title>
5
6<body>
7<table border="1"></table>
8
9<script>
10const a = [
11    ["都道府県", "性別"],
12    ["神奈川県", "男性"],
13    ["神奈川県", "女性"],
14    ["東京都", "男性"],
15    ["東京都", "女性"],
16    ["千葉県", "男性"],
17    ["埼玉県", "男性"]
18];
19
20const hoge=(A,B,C=[],D=[])=>B.reduce ((E,F,_,__,G = E.insertRow(-1))=>F.reduce ((E,f,i)=>((C[i]==f?D[i].rowSpan++:(D[i]=G.insertCell(-1)).textContent=C[i]=f),E),E),A);
21
22hoge (document.querySelector ('table'), a);
23
24</script>

質問者のブラウザの環境など、私の知ったことじゃない！
書き直してみたけれど、かえって頭が混乱します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title></title>
5
6<body>
7<table border="1" id="FUGA"></table>
8
9<script>
10var ary = [
11    ["都道府県", "性別"],
12    ["神奈川県", "男性"],
13    ["神奈川県", "女性"],
14    ["東京都", "男性"],
15    ["東京都", "女性"],
16    ["千葉県", "男性"],
17    ["埼玉県", "男性"]
18];
19
20
21function hoge (tbody, ary) {
22  
23  var tr, row, td, text;
24  var buf_txt = [ ], buf_td = [ ];
25  
26  for (var i = 0, I = ary.length; i < I; i += 1) {
27    tr = tbody.insertRow (-1);
28    row = ary[i];
29    
30    for (var j = 0, J = row.length; j < J; j += 1) {
31      if (buf_txt[j] == row[j]) {
32        td = buf_td[j];
33        td.rowSpan++;
34      }
35      else {
36        text = row[j];
37        td = tr.insertCell (-1);
38        buf_td[j] = td;
39        td.textContent = text;
40        buf_txt[j] = text;
41      }
42    }
43  }
44  
45  return tbody;
46}
47
48hoge (FUGA, ary);
49
50</script>

投稿2019/04/23 22:21

編集2019/04/24 02:37

退会済みユーザー

総合スコア0

miyabi_pudding

2019/04/24 02:05

アロー関数は、IEは非対応なので、対象ブラウザ確認された方がいいかもですね。（早くいなくなってほしいIE）

退会済みユーザー

2019/04/24 02:17

IEなんて亡くなればいい。皆が今でも引きずるからこうのような・・・ const にアロー関数も safari で動かない。何とかしてほしい！

miyabi_pudding

2019/04/24 03:47

クロスブラウザな記述お疲れ様です・・・。ほんと、IEのせいで、モダンで便利な書き方もメソッドも、クソも使えないので、非常に厄介ですよね。しかも、Windows 10のIE11のサポートが、2025年まで続くという鬼畜状況です泣だいたい、ほとんど日本人やで、未だにクソIE使ってるのは。

退会済みユーザー

2019/04/24 09:51

dom 使える時代に innerHTML で何とかするのも・・・ </tr></th></td>なんかつけなくても、勝手に解釈してくれるのに・・・翻訳機作った人の労力がここでも無駄に・・・

kumakuma112

2019/05/14 03:20

お礼が遅くなり申し訳ございません。ありがとうございます。文字列で置換して、最後にinnerHTMLで入れるためにどう改変したらいいか、苦戦してます。

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

こんにちは。

以下は、kumakuma112さんがご質問に挙げられているコードと同じように、 <table> タグを構成する文字列を作ることを目的としたコードになります。(動作確認のため、arrayの要素を追加しています。）

HTML:

<div id="root" />

JavaScript:

javascript
1const array = [
2  ["都道府県", "性別"],
3  ["神奈川県", "男性"],
4  ["神奈川県", "女性"],
5  ["東京都", "男性"],
6  ["東京都", "女性"],
7  ["東京都", "不明"],
8  ["群馬県", "女性"],
9  ["千葉県", "男性"],
10  ["埼玉県", "男性"]
11];
12
13
14
15const tableRows =　array.map((row, i, ary) => {
16  let tr = "  <tr>";
17  const prevRow = i > 0 ? ary[i-1] : ["", ""];
18  
19  if (prevRow[0] === row[0] || prevRow[1] === row[1]) {
20    const cell = `\n    <td>${row[prevRow[0] === row[0] ? 1 : 0]}</td>`;
21    tr += cell;
22  } 
23  else {
24    row.forEach((str, j) => {
25      let cell = `\n    <${i > 0 ? 'td' : 'th'}`;
26      let rowSpan = 1;
27      for (let k=i+1; k < array.length; ++ k) {
28        if (array[k][j] === str) 
29          rowSpan ++;
30        else
31          break;
32      }      
33      if (rowSpan > 1)
34        cell += ` rowspan="${rowSpan}"`;      
35      cell += `>${str}</${i > 0 ? 'td' : 'th'}>`;
36      tr += cell;
37    });
38  }  
39  tr += "\n  </tr>";
40  
41  return tr;
42});
43
44const tableString = `<table>\n${tableRows.join("\n")}\n</table>`;
45
46console.log(tableString);
47
48const div = document.getElementById("root");
49
50div.innerHTML = tableString;
51
52

以下は上記を動作確認するためのサンプルです。

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

なお、上記のコードのロジックを、アロー関数を使わないで書くことは割愛させて頂きます。
以上、参考になれば幸いです。

投稿2019/04/24 09:32

jun68ykt

総合スコア9058

kumakuma112

2019/05/14 03:21

お礼が遅くなり申し訳ございません。ありがとうございます。複数の列を結合する場合にどう調整したらいいのか苦戦してます。

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

文字列で処理すべきかどうかはともかく、下記のような感じでしょうか。

javascript
1let result = '<table>\n';
2for (let line = 0; line < array.length; line++) {
3    result += '<tr>';
4    for (let i = 0; i < array[line].length; i++) {
5        if (line === 0) {
6            result += '<th>' + array[line][i] + '</th>';
7        } else {
8            result += '<td>' + array[line][i] + '</td>';
9        }
10    }
11    result += '</tr>\n';
12}
13result += '</table>\n';
14console.log(result);