javascript – 类似Excel在PHP和AJAX中更新没有按钮的表

我需要更新一行表.所以当我点击一个单元格时,我希望它被转换为文本框,所以我使用了这个：

<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");

......

UPDATE

检查这个例子,我添加了侦听器来检测可信的td更改,我想你也应该添加它,参考这个contenteditable change events来定义在contenteditable字段上的正确更改事件.

说明：

contenteditable不会触发更改事件,此工作用于使用方法和事件委派的jquery来检测td的焦点事件.原始内容保存在td jquery数据对象$this.data(‘before’,$this.html()); .然后,当用户离开字段或触发任何事件’模糊键盘粘贴输入’时,将当前内容与数据对象中的内容进行比较,如果它不同,则触发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>