如何检测我使用引导数据表编辑的单元格？答案

【问题标题】：How can I detect the cell I have edited with bootstrap dataTables?如何检测我使用引导数据表编辑的单元格？
【发布时间】：2026-02-03 11:50:01
【问题描述】：

我正在使用可编辑的引导数据表。我想要做的是在编辑单元格时更新 mySQL 数据库：

index.php:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
</head>
<body>
    <table id="myTable" class="stripe">
        <thead>
            <tr>
                <th>id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Elliott</td>
                <td>Beaty</td>
                <td>elliott@example.com</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Joe</td>
                <td>Dirt</td>
                <td>Joe@example.com</td>
            </tr>
            <tr>
                <th>3</th>
                <td>John</td>
                <td>Doe</td>
                <td>John@example.com</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Jane</td>
                <td>Doe</td>
                <td>Jane@example.com</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Billy</td>
                <td>Bob</td>
                <td>Billy@example.com</td>
            </tr>
            <tr>
                <th>6</th>
                <td>Bobby</td>
                <td>Axlerod</td>
                <td>Bobby@axecapital.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://raw.githubusercontent.com/ejbeaty/CellEdit/master/js/dataTables.cellEdit.js"></script>
<script src="basic.js"></script>

basic.js：

$(document).ready(function () {
    var table = $('#myTable').DataTable();

    table.MakeCellsEditable({
        "onUpdate": myCallbackFunction
    });
});

function myCallbackFunction(updatedCell, updatedRow, oldValue,row) {
    console.log("The new value for the cell is: " + updatedCell.data());
    console.log("The old value for that cell was: " + oldValue);
    console.log("The values for each cell in that row are: " + updatedRow.data());
    jQuery.ajax({
       type: "POST",
       url: "update.php",
       data: 'new='+ updatedCell.data(),
       cache: false
     });
}

更新.php：

require('database.php'); 
$new = @$_POST['new'];
$pdo = $db->prepare("UPDATE data SET new=? WHERE id=?");  
$pdo->execute(array($update));

我很难找出我究竟编辑了哪个单元格。因此，当我将例如“Joe”更改为“Alan”时，我需要知道它是 id:1 和 row:First name 的信息。我想知道 dataTables 是否已经有用于此信息的变量，例如 updatedRow.data()。

一个加法：

控制台给出了我的输出：

[Log] The new value for the cell is: Alan
[Log] The old value for that cell was: Joe 
[Log] The values for each cell in that row are: 2,Alan,Dirt,Joe@example.com

所以我现在的想法是解析 updatedRow.data() 以获取已编辑单元格的 id

【问题讨论】：

data: {new:updatedCell.data()}, 代替数据：'new='+ updatedCell.data(),

标签： php mysql ajax twitter-bootstrap datatables

【解决方案1】：

更改data: {new:updatedCell.data()}, 而不是data: 'new='+ updatedCell.data(),

像下面这样：

$.ajax({
    url: "update.php",
    type: "POST", 
    data: {new:updatedCell.data()},
    contentType: false,
}).done(function (ex) {
   //alert(updatedRow.data());  
   var final_data = updatedRow.data(); 
   var split_data = final_data.split(","); 

   alert("Id : "+ split_data[0] + "Email : " + split_data[3]);      
}).fail(function (ex) {
   console.log('failed');
});

【讨论】：

谢谢！但这并没有给我编辑单元格在哪一行的信息。
我更新了我的问题，因为我刚刚有了一个想法。例如，如果我将 Joe 更改为 Alan，我需要的信息将是 id 和行。在这种情况下，它将是 2 和 First Name
因为我现在是 mySQL 我需要在那里更改的确切单元格
alert(updatedRow.data()) 给我输出：2,Alan,Dirt,Joe@example.com。现在我只需要拆分逗号分隔的列表并分别存储数据
2,Alan,Dirt,Joe@example.com 的预期输出是什么？