質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 843

kumakuma112

score 19

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

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

let array = [
    ["都道府県", "性別", "年齢", "誕生月"],
    ["神奈川県", "男性", 24, 8],
    ["神奈川県", "女性", 24, 12],
    ["東京都", "男性", 32, 6],
    ["東京都", "女性", 40, 2],
    ["千葉県", "男性", 18, 2],
    ["埼玉県", "男性", 48, 9]
]
let result = ''

result = '<table>'

for (let line = 0; line < array.length; line++) {

    result += '<tr>'
    for (let i = 0; i < line.length; i++) {
        if(line == 0){
            result += '<th>' + array[line][i] + '</th>'
        } else {
            result += '<td>' + array[line][i] + '</td>'
        }
    }
    result += '</tr>'
}

result += '</table>\n'

console.log(result)

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

<table>
    <tr>
        <th>都道府県</th>
        <th>性別</th>
    </tr>
    <tr>
        <td rowspan="2">神奈川県</td>
        <td>男性</td>
    </tr>
    <tr>
      <td>女性</td>
    </tr>
    <tr>
        <td rowspan="2">東京都</td>
        <td>男性</td>
    </tr>
    <tr>
        <td>女性</td>
    </tr>
    <tr>
        <td>千葉県</td>
        <td rowspan="2">男性</td>
    </tr>
    <tr>
        <td>埼玉県</td>
    </tr>
</table>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/04/23 17:19

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

    キャンセル

  • yambejp

    2019/04/23 17:30

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

    キャンセル

  • kumakuma112

    2019/04/23 17:33

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

    キャンセル

回答 3

+2

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

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title></title>

<body>
<table border="1"></table>

<script>
const a = [
    ["都道府県", "性別"],
    ["神奈川県", "男性"],
    ["神奈川県", "女性"],
    ["東京都", "男性"],
    ["東京都", "女性"],
    ["千葉県", "男性"],
    ["埼玉県", "男性"]
];

const 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);

hoge (document.querySelector ('table'), a);

</script>


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

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title></title>

<body>
<table border="1" id="FUGA"></table>

<script>
var ary = [
    ["都道府県", "性別"],
    ["神奈川県", "男性"],
    ["神奈川県", "女性"],
    ["東京都", "男性"],
    ["東京都", "女性"],
    ["千葉県", "男性"],
    ["埼玉県", "男性"]
];


function hoge (tbody, ary) {

  var tr, row, td, text;
  var buf_txt = [ ], buf_td = [ ];

  for (var i = 0, I = ary.length; i < I; i += 1) {
    tr = tbody.insertRow (-1);
    row = ary[i];

    for (var j = 0, J = row.length; j < J; j += 1) {
      if (buf_txt[j] == row[j]) {
        td = buf_td[j];
        td.rowSpan++;
      }
      else {
        text = row[j];
        td = tr.insertCell (-1);
        buf_td[j] = td;
        td.textContent = text;
        buf_txt[j] = text;
      }
    }
  }

  return tbody;
}

hoge (FUGA, ary);

</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/24 12:47

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

    キャンセル

  • 2019/04/24 18:51

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

    キャンセル

  • 2019/05/14 12:20

    お礼が遅くなり申し訳ございません。
    ありがとうございます。

    文字列で置換して、最後にinnerHTMLで入れるためにどう改変したらいいか、苦戦してます。

    キャンセル

0

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

let result = '<table>\n';
for (let line = 0; line < array.length; line++) {
    result += '<tr>';
    for (let i = 0; i < array[line].length; i++) {
        if (line === 0) {
            result += '<th>' + array[line][i] + '</th>';
        } else {
            result += '<td>' + array[line][i] + '</td>';
        }
    }
    result += '</tr>\n';
}
result += '</table>\n';
console.log(result);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/23 19:55

    あ、「縦方向の結合」を見落としていました。すみません・・・。

    キャンセル

  • 2019/04/24 11:14

    array[line][i]のところは、単純に記載ミスでした

    キャンセル

0

こんにちは。

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

HTML:

<div id="root" />

JavaScript:

const array = [
  ["都道府県", "性別"],
  ["神奈川県", "男性"],
  ["神奈川県", "女性"],
  ["東京都", "男性"],
  ["東京都", "女性"],
  ["東京都", "不明"],
  ["群馬県", "女性"],
  ["千葉県", "男性"],
  ["埼玉県", "男性"]
];



const tableRows = array.map((row, i, ary) => {
  let tr = "  <tr>";
  const prevRow = i > 0 ? ary[i-1] : ["", ""];

  if (prevRow[0] === row[0] || prevRow[1] === row[1]) {
    const cell = `\n    <td>${row[prevRow[0] === row[0] ? 1 : 0]}</td>`;
    tr += cell;
  } 
  else {
    row.forEach((str, j) => {
      let cell = `\n    <${i > 0 ? 'td' : 'th'}`;
      let rowSpan = 1;
      for (let k=i+1; k < array.length; ++ k) {
        if (array[k][j] === str) 
          rowSpan ++;
        else
          break;
      }      
      if (rowSpan > 1)
        cell += ` rowspan="${rowSpan}"`;      
      cell += `>${str}</${i > 0 ? 'td' : 'th'}>`;
      tr += cell;
    });
  }  
  tr += "\n  </tr>";

  return tr;
});

const tableString = `<table>\n${tableRows.join("\n")}\n</table>`;

console.log(tableString);

const div = document.getElementById("root");

div.innerHTML = tableString;

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/14 12:21

    お礼が遅くなり申し訳ございません。
    ありがとうございます。

    複数の列を結合する場合にどう調整したらいいのか苦戦してます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る