editable data table javascript with ajax code example

Example 1: editable table ajax

.edit{
 width: 100%;
 height: 25px;
}
.editMode{
 border: 1px solid black;
}

/* Table Layout */
table {
 border:3px solid lavender;
 border-radius:3px;
}

table tr:nth-child(1){
 background-color:dodgerblue;
}
table tr:nth-child(1) th{
 color:white;
 padding:10px 0px;
 letter-spacing: 1px;
}

/* Table rows and columns */
table td{
 padding:10px;
}
table tr:nth-child(even){
 background-color:lavender;
 color:black;
}

Example 2: editable table ajax

<div class='container'>
 
 <table width='100%' border='0'>
  <tr>
   <th width='10%'>S.no</th>
   <th width='40%'>Username</th>
   <th width='40%'>Name</th>
  </tr>
  <?php 
   $query = "select * from users order by name";
   $result = mysqli_query($con,$query);
   $count = 1;
   while($row = mysqli_fetch_array($result) ){
    $id = $row['id'];
    $username = $row['username'];
    $name = $row['name'];
  ?>
  <tr>
   <td><?php echo $count; ?></td>
   <td> 
     <div contentEditable='true' class='edit' id='username_<?php echo $id; ?>'> 
       <?php echo $username; ?>
     </div> 
   </td>
   <td> 
     <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'>
       <?php echo $name; ?> 
     </div> 
   </td>
  </tr>
  <?php
   $count ++;
  }
  ?> 
 </table>
</div>