在jQuery中获取已编辑的TD值

Question

I have an HTML table whose span is populed by PHP variables. The table is showing up pretty well, showing the data present in the database. The following is the table row, which is wrapped inside a PHP while loop.

<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>

The following is jQuery function I am using to pull the Data.

$('#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();
});

However, I am not able to retrieve the values from the fields that are edited. The rest of the TR cells are Okay. How do I retrieve modified values from the Table cells I have edited?

IMPORTANT NOTE:

I am able to obtain values that are from unedited TR cells. The jQuery selectors are correct.

Answer 1

When you set contenteditable to true, you can store the current value in with the jQuery data() function.

For example:

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

Then, when it's time to read all of the values in the table, you can compare the current value of the td content to the original value. The implementation would be something like this:

$('#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());
  }
});