在jQuery

Question

我有一个HTML表，其范围由PHP变量填充。该表显示得很好，显示了数据库中的数据。以下是表行，它包含在PHP while循环中。

<table class="table table-striped table-hover table-bordered dataTable no-footer" id="sample_editable_1" role="grid" aria-describedby="sample_editable_1_info">
  <tr role="row" class="odd">
    <td contenteditable="false" class="sorting_1">
      <span class="sl"> </span>
    </td>
    <td contenteditable="false">
      <span class="itid"><?php echo $itid1; ?></span>
    </td>
    <td contenteditable="false">
      <span class="name"><?php echo $name1; ?></span>
    </td>
    <td contenteditable="false">
      <span class="price"> <?php echo $price1; ?></span>
    </td>
    <td contenteditable="false">
      <span class="qty"><?php echo $qty1; ?></span>
    </td>
    <td>
      <button class="pr_edit" value="edit" href="javascript:;"> Edit </button>
    </td>
    <td>
      <button class="pr_elete" href="javascript:;"> Delete </button>
    </td>
  </tr>
</table>

以下是我用来拉取数据的jQuery函数。

$('#sample_editable_1').on('click', '.pr_edit', function() {
  console.log("here");
  var currentTD = $(this).parents('tr').find('td');
  $.each(currentTD, function() {
    $(this).prop('contenteditable', true);
  });

  var ino = $(this).closest('tr').find("span.itid").text();
  var iname = $(this).closest('tr').find("span.name").text();
  var iprice = $(this).closest('tr').find("span.price").text();
  var iqty = $(this).closest('tr').find("span.qty").text();
});

但是，我无法从编辑的字段中检索值。其余的TR细胞都没问题。如何从我编辑的表格单元格中检索修改后的值？

重要提示：

我能够从未编辑的TR细胞中获得值。 jQuery选择器是正确的。

Answer 1

将contenteditable设置为true时，可以使用jQuery data()函数存储当前值。

例如：

$(this).data('original-value', $(this).text());

然后，当您有时间阅读表格中的所有值时，您可以将td内容的当前值与原始值进行比较。实现将是这样的：

$('#sample_editable_1 td').each(function() {
  if ($(this).data('original-value') !== $(this).text()) {
    alert('this cell has been edited');
    alert('original value was: ' + $(this).data('original-value'));
    alert('new value is: ' + $(this).text());
  }
});