script.js

const onlyForDevelop = () => {
  document.getElementById("rows").value = "11";
  document.getElementById("columns").value = "6";
  document.querySelector("input[type='submit']").click();
};

const appendRowsToTbody = (table) => {
  const tbody = table.querySelector("tbody") || table.createTBody();
  Array.from(table.rows).forEach((row) => {
    tbody.appendChild(row);
  });
};

const editRecord = (e) => {
  const stateCondition = document.querySelector(
    "input[name='editRecord']:checked"
  )?.id;
  if (!stateCondition) return;

  const oldElement = e.target;
  const colIndex = oldElement.cellIndex;
  const row = oldElement.parentElement;
  const table = oldElement.closest("table");
  const rows = table.rows;

  const createNewElement = (tag, text) => {
    const newElement = document.createElement(tag);
    newElement.textContent = text;
    return newElement;
  };

  const replaceCell = (cell, tag) => {
    const newElement = createNewElement(tag, cell.textContent);
    cell.replaceWith(newElement);
  };

  switch (stateCondition) {
    case "toggleTHCell":
      replaceCell(oldElement, oldElement.tagName === "TD" ? "th" : "td");
      break;
    case "toggleTHCol":
      Array.from(rows).forEach((row) =>
        replaceCell(
          row.cells[colIndex],
          row.cells[colIndex].tagName === "TD" ? "th" : "td"
        )
      );
      break;
    case "toggleTHRow":
      Array.from(row.cells).forEach((cell) =>
        replaceCell(cell, cell.tagName === "TD" ? "th" : "td")
      );
      break;
    case "delCell":
      oldElement.remove();
      break;
    case "delCol":
      Array.from(rows).forEach((row) => {
        if (colIndex < row.cells.length) {
          row.deleteCell(colIndex);
        }
      });
      break;
    case "delRow":
      row.remove();
      break;
    case "addCell":
      const newCell = row.insertCell(oldElement.cellIndex + 1);
      newCell.textContent = `Row ${row.rowIndex + 1}, Col ${
        oldElement.cellIndex + 2
      }`;
      break;
    case "addCol":
      Array.from(rows).forEach((row, i) => {
        const cell = row.insertCell(colIndex + 1);
        cell.textContent = `Row ${i + 1}, Col ${colIndex + 2}`;
      });
      break;
    case "addRow":
      const newRow = table.insertRow(row.rowIndex + 1);
      Array.from(row.cells).forEach((_, i) => {
        const cell = newRow.insertCell(i);
        cell.textContent = `Row ${row.rowIndex + 2}, Col ${i + 1}`;
      });
      break;
    case "renameAllCells":
      Array.from(rows).forEach((row, i) => {
        Array.from(row.cells).forEach((cell, j) => {
          cell.textContent = `Row ${i + 1}, Col ${j + 1}`;
        });
      });
      break;
    case "toggleThead":
      appendRowsToTbody(table);
      const thead = table.createTHead();
      thead.appendChild(row);
      break;
    case "toggleTfoot":
      appendRowsToTbody(table);
      const tfoot = table.createTFoot();
      tfoot.appendChild(row);
      break;
    default:
      break;
  }

  document.getElementById("result").value = table.outerHTML;
};

const generateTable = (e) => {
  e.preventDefault();

  const rows = parseInt(document.getElementById("rows").value, 10);
  const columns = parseInt(document.getElementById("columns").value, 10);
  const captionData = document.getElementById("caption").value.trim();
  const tableContainer = document.getElementById("tableContainer");
  const resultTextarea = document.getElementById("result");

  tableContainer.innerHTML = "";
  resultTextarea.value = "";

  const table = document.createElement("table");

  if (captionData) {
    const caption = document.createElement("caption");
    caption.textContent = captionData;
    table.appendChild(caption);
  }

  for (let i = 0; i < rows; i++) {
    const tr = document.createElement("tr");
    tr.addEventListener("click", editRecord);
    for (let j = 0; j < columns; j++) {
      const td = document.createElement("td");
      td.textContent = `Row ${i + 1}, Col ${j + 1}`;
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }

  tableContainer.appendChild(table);
  resultTextarea.value = table.outerHTML;
};

const toggleTableContainer = () => {
  const editContainer = document.getElementById("editContainer");
  const tableContainer = document.getElementById("tableContainer");
  editContainer.style.display = document.getElementById("showTable").checked
    ? "grid"
    : "none";
  tableContainer.style.display = document.getElementById("showTable").checked
    ? "block"
    : "none";
};

const toggleCodeContainer = () => {
  const codeContainer = document.getElementById("result");
  codeContainer.style.display = document.getElementById("showCode").checked
    ? "block"
    : "none";
};