我需要更新表格的一行。所以当我点击一个单元格时，我希望它被转换成文本框，所以我使用了这个:

<td contenteditable></td>

然后，当 <td> 的内容已更改，我需要通过 AJAX 发送它以在服务器中更新它而无需单击按钮，因此它将使用 .change(function()) .

我试图让内容变成一个变量:

$("TD").change(function()
{
//Here I want to set the row ID:
var rowid = '<?php echo $row['id'] ?>';
var name = $("#emp_name").val();
var position = $("#position").val();
var salary = $("#salary").val();
$.ajax
        ({
            url: 'update.php', 
            type: 'POST', 
            data: {dataId: rowid, data1: name, data2: position, data3: salary},//Now we can use $_POST[data1];
            dataType: "text",

            success:function(data)
            {
                if(data=="success")
                {
                    //alert("Data added");
                    $("#before_tr").before("<tr><td>"+emp+"</td><td>"+pos+"</td><td>"+sal+"</td></tr>");
                    $("#emp_name").val("");
                    $("#position").val("");
                    $("#salary").val("");
                }
            },

            error:function(data)
            {
                if(data!="success")
                {
                    alert("data not added");
                }
            }

        });
});

问题是如何知道哪一行被更改为通过AJAX发送它？即使数据未更新，我也不会收到任何错误。

这是 update.php 代码:

try
{
        $rowid = $_POST['dataId'];
        $emp_name = $_POST['data1'];
        $pos = $_POST['data2'];
        $sal = $_POST['data3'];

        $upd = "UPDATE emp SET name = :emp_name, position = :pos, sal = :sal WHERE id  = :rowid";
        $updStmt = $conn->prepare($upd);
        $updStmt->bindValue(":rowid", $rowid);
        $updStmt->bindValue(":emp_name", $emp_name);
        $updStmt->bindValue(":pos", $pos);
        $updStmt->bindValue(":sal", $sal);
        $updStmt->execute();

        echo "success";
}

catch(PDOException $ex)
{
    echo $ex->getMessage();
}

HTML:

<tbody>
                <?php
                $sql = "SELECT * FROM employee";
                $stmt=$conn->prepare($sql);
                $stmt->execute();
                $res=$stmt->fetchAll();
                foreach($res as $row){
                ?>
                <tr id=""<?php echo $row['id'] ?>"">
                    <td contenteditable><?php echo $row['emp_name'] ?></td>
                    <td contenteditable><?php echo $row['position'] ?></td>
                    <td contenteditable><?php echo $row['salary'] ?></td>
                </tr>
                <?php } ?>

最佳答案

当使用 PHP 加载数据时，您需要在 html 中保留行 ID:

<tr id="<?php echo $yourList["id"]; ?>">
<td contenteditable></td>
</tr>

然后在您的 javascript 中，您可以使用 parent() jquery 函数捕获它

$("TD").change(function()
{
//Here I want to set the row ID:
var rowid =$(this).parent().attr("id");

......

更新

检查这个例子，我添加了监听器来检测 contenteditable td 变化，我想你也应该添加它，引用这个 contenteditable change events用于在 contenteditable 字段上定义适当的更改事件。

解释:

contenteditable 不会触发更改事件，此解决方法用于使用 jquery on 方法和事件委托(delegate)来检测 td 的焦点事件。原始内容保存在 td jquery 数据对象 $this.data('before', $this.html()); 中。然后当用户离开该字段或触发任何事件 'blur keyup paste input' 时，将当前内容与数据对象中的内容进行比较，如果不同，则 的更改事件code>td 被触发。

$(document).ready(function(){

  
  $('table').on('focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
  }).on('blur keyup paste input', '[contenteditable]', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
  });
  
  $("TD").change(function()
  {
    //Here I want to set the row ID:
    var rowid = $(this).parent().attr("id");

    $("#res").html(rowid);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" width="500px">
  <tr  id="1222">
    <td contenteditable></td>
  </tr>
  
  <tr  id="55555">
    <td contenteditable></td>
  </tr>
  
 </table>

Row Id : <span id="res"></span>

关于javascript - 类似 Excel 的 PHP 和 AJAX 中没有按钮的表格更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35148422/