本教程旨在解决`contenteditable`表格单元格在失焦时数据回滚不准确或显示`undefined`的问题。核心在于摒弃不当的`localStorage`使用，转而采用jQuery的`data()`方法进行元素级的数据存储，确保数据在编辑会话中正确地保存和恢复，同时实现编辑按钮的智能显示与隐藏。
问题分析：localStorage的误用导致数据丢失
在动态表格中实现contenteditable单元格的编辑与回滚功能时，常见的问题是数据在多次交互后显示undefined或回滚到错误的值。这通常是由于对localStorage的不当使用造成的。
原始代码中存在以下几个关键问题：
localStorage的全局性与单一键值： localStorage是浏览器级别的持久存储，且其键值是全局唯一的。当所有contenteditable单元格都使用同一个键（例如’originalValue’）来存储数据时，后一个单元格的焦点事件会覆盖前一个单元格存储的值。localStorage.clear()的滥用： 在focusout事件中调用localStorage.clear()会清除所有存储在当前域下的localStorage数据，而不仅仅是’originalValue’。这意味着如果一个单元格失去焦点，它会清除所有其他单元格可能已存储的原始值，导致其他单元格在需要回滚时无法找到对应的数据，从而显示undefined。数据来源的潜在混淆： 原始代码尝试从currentRow.find(“.cellData”).html()获取原始值，这通常是正确的，因为它指向了数据库加载的初始值。然而，如果处理不当，可能会与$(this).html()（当前单元格的HTML内容，可能包含未保存的编辑）混淆。
这些问题共同导致了数据回滚的不可靠性，尤其是在快速或频繁的单元格交互中。
解决方案：利用jQuery的Data API进行元素级数据管理
为了解决上述问题，我们应该避免使用localStorage进行临时的、元素级别的数据存储。jQuery提供了一个更优雅、更适合此场景的解决方案：Data API（即$(element).data()方法）。
$(element).data(key, value)允许我们将任意数据附加到DOM元素上，并且这些数据是元素私有的，不会污染全局命名空间。当元素从DOM中移除时，与之关联的数据也会被自动清理（在jQuery 1.4.3+版本中）。这使得它成为存储contenteditable单元格原始值的理想选择。
实施步骤与代码示例
我们将修改原有的jQuery脚本，以实现以下目标：
当单元格获得焦点时，获取其原始的数据库值并存储在单元格自身的数据属性中。显示该行对应的编辑（保存）按钮。当单元格失去焦点时，隐藏编辑按钮。从单元格自身的数据属性中检索原始值，并将其内容回滚到该值。（可选但推荐）清除该单元格上存储的临时数据。
HTML结构回顾
原始HTML结构中，每个contenteditable的
内部包含一个标签，其class=”cellData”用于显示并保存从数据库加载的原始值。这个结构非常适合我们获取原始值。
<input type="text" class="idInput" value="" hidden>
改进后的jQuery脚本
$(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('' + newSizeName + ''); // 移除存储的原始值，因为现在新的值已经成为“原始”值 $currentCell.removeData('originalCellDataValue'); // 隐藏编辑按钮 $(this).hide(); });});
代码解释
$(document).ready(function() { … });: 确保DOM完全加载后再执行脚本。$(“#dataTable tbody td .sizeEditBtn”).hide();: 页面加载时，所有编辑按钮默认隐藏。$(“#dataTable tbody .tableCell”).focus(function() { … });:var $currentCell = $(this);: 获取当前获得焦点的contenteditable单元格。var originalValue = $currentCell.find(“.cellData”).html();: 关键改进点。 我们明确地从单元格内部的元素中获取其初始加载的HTML内容。这确保了我们总是获取到数据库中存储的原始值，而不是用户可能已经输入的但未保存的临时值。$currentCell.data(‘originalCellDataValue’, originalValue);:
以上就是优化contenteditable单元格的数据回滚与状态管理的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1337786.html
微信扫一扫 
支付宝扫一扫 
