localStorage 变量变为未定义答案

【问题标题】：localStorage variable becomes UndefinedlocalStorage 变量变为未定义
【发布时间】：2022-01-18 11:10:18
【问题描述】：

所以我有一个由 mysql 数据库中的 php 填充的表，在我的表中我有一个使用 contenteditable 属性的可编辑单元格。我想要实现的是，当专注于单元格时，该行的检查按钮应该出现，并且在关注该按钮后该按钮将消失并且其中的数据将返回到原始值，因为它不会保存在数据库中，除非检查按钮将被单击。到目前为止，我的代码按预期执行，但是在多次单击列中的单元格后，它在单元格中显示未定义。有人能帮我吗？有没有其他方法可以做到这一点？这是我的html代码：

<?php session_start(); 
include '../assets/back-end-includes/DB-connection.php';
$selectsizeQuery="SELECT * 
                  FROM `sizetable` ";
$selectsizeResult=filtertable($selectsizeQuery);
?>
<div class="row">
                  <div class="col-sm-12">
                    <div class="table-responsive">
                      <table class="table table-dark table-hover table-sm" id="dataTable">
                        <thead>
                          <tr>
                            <th scope="col">Size</th>
                            <th scope="col">Action</th>
                          </tr>
                        </thead>
                        <tbody  id="tableBody">
                        <?php 
                        while($row=mysqli_fetch_array($selectsizeResult)){
                        ?>
                        <tr>
                          <td contenteditable class="tableCell">
                            <input type="text" class="idInput" value="<?php echo $row['sizeID']; ?>" hidden>
                            <strong class="cellData"><?php echo $row['sizeName']; ?></strong>
                          </td>
                          <td>
                              <button type="button" class="btn btn-success btn-sm sizeEditBtn" name="productEditBtn[]">
                                <i class="fas fa-check-circle"></i>
                              </button>
                              <button type="button" class="btn btn-danger btn-sm sizeDeleteBtn" name="productDeleteBtn[]" data-bs-toggle="modal" data-bs-target="#deleteProductModal">
                                <i class="fas fa-trash-alt"></i>
                              </button>
                          </td>
                        </tr>
                        <?php
                        }
                        ?>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>

这就是我的 jquery 脚本的样子：

<script type="text/javascript">
$("#dataTable tbody td .sizeEditBtn").hide();
$("#dataTable tbody .tableCell").focus(function() {
  var currentRow = $(this).closest("tr");
  var originalValue = currentRow.find(".cellData").html();
  localStorage.setItem('originalValue', originalValue);
  currentRow.find(".sizeEditBtn").show();
});
$("#dataTable tbody .tableCell").focusout(function() {
  var currentRow = $(this).closest("tr");
  currentRow.find(".sizeEditBtn").hide();
  var originalValue = localStorage.getItem('originalValue');
  $(this).html(originalValue);
  localStorage.clear();
});
</script>

任何帮助将不胜感激。

【问题讨论】：

标签： php html jquery

【解决方案1】：

而不是这句话

var originalValue = currentRow.find(".cellData").html();

使用

var originalValue = $(this).html();

【讨论】：