在jQuery中获取编辑的TD值

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