优化contenteditable单元格的数据回滚与状态管理

<td contenteditable class="tableCell">
  <input type="text" class="idInput" value="<?php echo $row['sizeID']; ?>" hidden>
  <strong class="cellData"><?php echo $row['sizeName']; ?></strong>
</td>

<script type="text/javascript">
$(document).ready(function() {
  // 初始隐藏所有编辑按钮
  $("#dataTable tbody td .sizeEditBtn").hide();

  // 当contenteditable单元格获得焦点时
  $("#dataTable tbody .tableCell").focus(function() {
    var $currentCell = $(this);
    var $currentRow = $currentCell.closest("tr");

    // 获取单元格的原始数据库值（从.cellData元素中获取）
    // 这是为了确保回滚到数据库加载的初始值，而不是可能存在的未保存的编辑
    var originalValue = $currentCell.find(".cellData").html(); 

    // 将原始值存储在当前单元格的data属性中
    $currentCell.data('originalCellDataValue', originalValue);

    // 显示当前行的编辑按钮
    $currentRow.find(".sizeEditBtn").show();
  });

  // 当contenteditable单元格失去焦点时
  $("#dataTable tbody .tableCell").focusout(function() {
    var $currentCell = $(this);
    var $currentRow = $currentCell.closest("tr");

    // 隐藏当前行的编辑按钮
    $currentRow.find(".sizeEditBtn").hide();

    // 从当前单元格的data属性中获取之前存储的原始值
    var storedOriginalValue = $currentCell.data('originalCellDataValue');

    // 如果存储了原始值，则将其回滚到单元格中
    if (storedOriginalValue !== undefined) {
      $currentCell.html(storedOriginalValue);
    }

    // 清除单元格上存储的临时数据，避免内存泄漏和不必要的残留
    $currentCell.removeData('originalCellDataValue');
  });

  // 假设的保存按钮点击事件（此处仅为示例，需根据实际保存逻辑实现）
  $("#dataTable tbody").on('click', '.sizeEditBtn', function() {
    var $currentCell = $(this).closest("tr").find(".tableCell");
    var sizeID = $currentCell.find(".idInput").val();
    var newSizeName = $currentCell.text().trim(); // 获取编辑后的文本内容

    // 在这里执行AJAX请求将newSizeName和sizeID保存到数据库
    console.log("Saving Size ID:", sizeID, "New Size Name:", newSizeName);

    // 假设保存成功后，更新.cellData的内容以反映新的“原始”值
    // 并且可能需要移除contenteditable单元格中多余的HTML结构，只保留文本
    $currentCell.find(".cellData").html(newSizeName); // 更新强标签内的值
    $currentCell.html('<input type="text" class="idInput" value="' + sizeID + '" hidden><strong class="cellData">' + newSizeName + '</strong>');

    // 移除存储的原始值，因为现在新的值已经成为“原始”值
    $currentCell.removeData('originalCellDataValue');

    // 隐藏编辑按钮
    $(this).hide();
  });
});
</script>