Excel-like Updating a table without a button in PHP and AJAX

Question

I need to update a table row. So when I click on a cell, I want it to be converted to a text box, so I used this:

<td contenteditable></td>

And then, when the contents of a have <td>changed, I need to send it via AJAX to update it on the server without clicking a button, so it will use .change(function()).

I tried converting the contents to a variable:

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

        });
});

The problem is how to find out which line is changed to send it through AJAX? I do not get any errors even if the data is not updated.

Here is the update.php code:

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 } ?>

Answer 1

PHP html:

<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 , , , .

:

, td jquery . td jquery data $this.data('before', $this.html());. , 'blur keyup paste input', , , 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>

Answer 2

<tr row_id="<?php echo $row['id'] ?>"> ></tr>

Ajax

var rowid = $(this).attr('row_id');