JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="root" />

CSS

table {
  border: solid 1px #000;
  border-collapse: collapse;
}

td, th {
  border: solid 1px #000;
  padding: 5px;
}

th {
  background-color: #CCC;
}

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;