如何用PHP将JS实现的可编辑textarea表格单元格数据保存至CSV文件

• 表单结构完全不合法：循环渲染表格时在每个td外层嵌套独立form，既没有收集数据的字段，也没有和编辑态的textarea做关联，OK按钮虽然标注了type="submit"，但实际不会向后端传递任何text字段的数据，后端的写入逻辑永远不会触发。
• 编辑流程没有对接后端：点击OK时仅在前端完成textarea值到td的回填，全程没有发起HTTP请求传递修改内容，哪怕后端接收逻辑写对了，也收不到任何数据。
• 无效冗余代码：给textarea手动赋值textArea.tagName = 'text'完全无效，DOM元素的tagName为只读属性，无法通过JS修改，这段代码原本是想给表单字段命名，但实际没有生效。
• 后端写入逻辑缺少边界校验：当前逻辑是收到POST的text值就直接全量覆盖CSV文件，没有权限校验、格式校验，加上前端永远传不对值，所以写入功能从未生效。

核心调整思路 #

1. 移除单元格级别的孤立form，全页统一通过JS收集表格内容，异步提交给后端
2. 前端编辑完成点OK时，先把新值回填到td，再把整个表格的内容按照CSV规范序列化，POST到后端
3. 后端接收序列化后的CSV内容，写入到目标文件，返回操作结果

可直接运行的修复代码 #

<?php
$file = 'sales.csv';
// 确保目标文件可写入
if (file_exists($file) && !is_writable($file)) {
    chmod($file, 0644);
}

// 处理保存请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['csv_content'])) {
    $content = stripslashes($_POST['csv_content']);
    file_put_contents($file, $content);
    exit(json_encode(['code' => 0, 'msg' => '保存成功']));
}

// 读取CSV渲染表格
$csvRows = [];
if (file_exists($file)) {
    $handle = fopen($file, 'r');
    while (($row = fgetcsv($handle)) !== false) {
        $csvRows[] = $row;
    }
    fclose($handle);
}
?>
<html>
<body>
  <table border="1" id="sales">
    <?php foreach ($csvRows as $row): ?>
    <tr>
      <?php foreach ($row as $cell): ?>
      <td width="100"><?= htmlspecialchars($cell) ?></td>
      <?php endforeach; ?>
    </tr>
    <?php endforeach; ?>
  </table>
  <div id="tip" style="color:#2c8a2c; margin-top:8px;"></div>

  <script>
  const table = document.getElementById('sales');
  let editingTd = null;
  const tipDom = document.getElementById('tip');

  table.onclick = function(e) {
    const target = e.target.closest('.edit-cancel,.edit-ok,td');
    if (!table.contains(target)) return;

    if (target.className === 'edit-cancel') {
      finishEdit(editingTd.elem, false);
    } else if (target.className === 'edit-ok') {
      finishEdit(editingTd.elem, true);
    } else if (target.nodeName === 'TD') {
      if (editingTd) return;
      makeEditable(target);
    }
  };

  function makeEditable(td) {
    editingTd = {
      elem: td,
      originalContent: td.innerHTML
    };
    const textarea = document.createElement('textarea');
    textarea.style.width = td.clientWidth + 'px';
    textarea.style.height = td.clientHeight;
    textarea.value = td.innerHTML;
    td.innerHTML = '';
    td.appendChild(textarea);
    textarea.focus();

    td.insertAdjacentHTML('beforeend',
      '<div><button type="button" class="edit-ok">OK</button> <button type="button" class="edit-cancel">CANCEL</button></div>'
    );
  }

  // 按照RFC4180规范把表格内容序列化为CSV格式
  function serializeTableToCsv() {
    const rows = document.querySelectorAll('#sales tr');
    const csvResult = [];
    rows.forEach(row => {
      const cells = row.querySelectorAll('td');
      const rowValues = Array.from(cells).map(cell => {
        let cellVal = cell.innerText.replace(/"/g, '""');
        return `"${cellVal}"`;
      });
      csvResult.push(rowValues.join(','));
    });
    return csvResult.join('\n');
  }

  function finishEdit(td, isConfirm) {
    if (isConfirm) {
      td.innerHTML = td.querySelector('textarea').value;
      // 编辑完成自动触发保存
      saveToCsvFile();
    } else {
      td.innerHTML = editingTd.originalContent;
    }
    // 清除编辑态的按钮和输入框
    if (td.querySelector('div')) td.querySelector('div').remove();
    editingTd = null;
  }

  function saveToCsvFile() {
    const csvStr = serializeTableToCsv();
    fetch(window.location.href, {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: `csv_content=${encodeURIComponent(csvStr)}`
    }).then(res => res.json()).then(res => {
      tipDom.innerText = res.msg;
      setTimeout(() => tipDom.innerText = '', 2000);
    });
  }
  </script>
</body>
</html>

• 检查sales.csv的文件权限：PHP进程需要对该文件拥有读、写权限，否则写入会静默失败
• 单元格内容包含逗号、双引号、换行时，必须按照CSV规范做转义，否则重新读取文件时会出现列错位
• 避免在td元素内嵌套form标签，这种非合法DOM嵌套会导致浏览器解析异常，表单提交逻辑失效

内容的提问来源于stack exchange，提问作者Might