表を作成する

サンプルページは以下のページになります。

表の作成 - サンプルページ

セルを選択した状態で、それぞれのアクションボタンをクリックすると行や列の追加や削除を行うことができます。

データベースにデータを登録する場合は、以下のページを参考にしてください。

表のデータをデータベースに登録する - Express.js

コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="/javascripts/jssample/chart.js"></script>
  <link rel="stylesheet" href="/stylesheets/jssample/chart.css">
  <title>Document</title>
</head>
<body>
  <table id="sheetTable">
    <tbody>
      <tr>
        <td><input type="text" name="rows[0][0]"></td>
        <td><input type="text" name="rows[0][1]"></td>
      </tr>
      <tr>
        <td><input type="text" name="rows[1][0]"></td>
        <td><input type="text" name="rows[1][1]"></td>
      </tr>
    </tbody>
  </table>

  <div style="margin-top:10px;">
    <button type="button" id="addRowAbove">行を上に追加</button>
    <button type="button" id="addRowBelow">行を下に追加</button>
    <button type="button" id="addColLeft">列を左に追加</button>
    <button type="button" id="addColRight">列を右に追加</button>
    <button type="button" id="delRow">行削除</button>
    <button type="button" id="delCol">列削除</button>
  </div>
</body>
</html>

CSS

table {
  border-collapse: collapse;

  tr, td {
    line-height: 1.0rem;
    margin: 0;
    padding: 0;
    border: 1px solid gray;
  }
  input {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
  }
}

Javascript

window.addEventListener('load', function(){
  const table = document.getElementById("sheetTable").querySelector("tbody");
  let selectedCell = null;

  // セルクリックで選択
  table.addEventListener("click", (e) => {
    if(e.target.tagName === "INPUT"){
      selectedCell = e.target;
      table.querySelectorAll("input").forEach(i => i.style.background = "");
      selectedCell.style.background = "#d0f0ff";
    }
  });

  // tbody 内の行のインデックス取得
  function getRowIndex(cell){
    return Array.from(table.querySelectorAll("tr")).indexOf(cell.closest("tr"));
  }

  function getColIndex(cell){
    return Array.from(cell.closest("tr").children).indexOf(cell.closest("td"));
  }

  // name 更新
  function updateInputNames(){
    Array.from(table.querySelectorAll("tr")).forEach((row, r) => {
      Array.from(row.children).forEach((cell,c)=>{
        const input = cell.querySelector("input");
        if(input) input.name = `rows[${r}][${c}]`;
      });
    });
  }

  // 行追加
  document.getElementById("addRowAbove").addEventListener("click", () => {
    if(!selectedCell) return alert("セルを選択してください");

    const rowIndex = getRowIndex(selectedCell);
    const colCount = table.rows[0].cells.length;
    const newRow = table.insertRow(rowIndex);

    for(let c = 0; c < colCount; c++){
      const cell = newRow.insertCell();
      const input = document.createElement("input");
      input.type="text";
      cell.appendChild(input);
    }
    updateInputNames();
  });

  document.getElementById("addRowBelow").addEventListener("click", () => {
    if(!selectedCell) return alert("セルを選択してください");

    const rowIndex = getRowIndex(selectedCell);
    const colCount = table.rows[0].cells.length;
    const newRow = table.insertRow(rowIndex+1);

    for(let c = 0; c < colCount; c++){
      const cell = newRow.insertCell();
      const input = document.createElement("input");
      input.type="text";
      cell.appendChild(input);
    }
    updateInputNames();
  });

  // 列追加
  document.getElementById("addColLeft").addEventListener("click", () => {
    if(!selectedCell) return alert("セルを選択してください");

    const colIndex = getColIndex(selectedCell);

    Array.from(table.rows).forEach(row => {
      const cell = row.insertCell(colIndex);
      const input = document.createElement("input");
      input.type="text";
      cell.appendChild(input);
    });
    updateInputNames();
  });

  document.getElementById("addColRight").addEventListener("click", () => {
    if(!selectedCell) return alert("セルを選択してください");

    const colIndex = getColIndex(selectedCell);

    Array.from(table.rows).forEach(row => {
      const cell = row.insertCell(colIndex+1);
      const input = document.createElement("input");
      input.type="text";
      cell.appendChild(input);
    });
    updateInputNames();
  });

  // 行削除
  document.getElementById("delRow").addEventListener("click", () => {
    if(!selectedCell) return alert("セルを選択してください");

    if(table.rows.length > 1){
      table.deleteRow(getRowIndex(selectedCell));
      selectedCell = null;
      updateInputNames();
    }
  });

  // 列削除
  document.getElementById("delCol").addEventListener("click", () => {
    if(!selectedCell) return alert("セルを選択してください");

    if(table.rows[0].cells.length > 1){
      const colIndex = getColIndex(selectedCell);
      Array.from(table.rows).forEach(row => {
        row.deleteCell(colIndex);
      });
      selectedCell = null;
      updateInputNames();
    }
  });
});