我有一个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 选择器是正确的。
当您将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());
}
});