editable table ajax

1.edit{
2 width: 100%;
3 height: 25px;
4}
5.editMode{
6 border: 1px solid black;
7}
8
9/* Table Layout */
10table {
11 border:3px solid lavender;
12 border-radius:3px;
13}
14
15table tr:nth-child(1){
16 background-color:dodgerblue;
17}
18table tr:nth-child(1) th{
19 color:white;
20 padding:10px 0px;
21 letter-spacing: 1px;
22}
23
24/* Table rows and columns */
25table td{
26 padding:10px;
27}
28table tr:nth-child(even){
29 background-color:lavender;
30 color:black;
31}

1<div class='container'>
2 
3 <table width='100%' border='0'>
4  <tr>
5   <th width='10%'>S.no</th>
6   <th width='40%'>Username</th>
7   <th width='40%'>Name</th>
8  </tr>
9  <?php 
10   $query = "select * from users order by name";
11   $result = mysqli_query($con,$query);
12   $count = 1;
13   while($row = mysqli_fetch_array($result) ){
14    $id = $row['id'];
15    $username = $row['username'];
16    $name = $row['name'];
17  ?>
18  <tr>
19   <td><?php echo $count; ?></td>
20   <td> 
21     <div contentEditable='true' class='edit' id='username_<?php echo $id; ?>'> 
22       <?php echo $username; ?>
23     </div> 
24   </td>
25   <td> 
26     <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'>
27       <?php echo $name; ?> 
28     </div> 
29   </td>
30  </tr>
31  <?php
32   $count ++;
33  }
34  ?> 
35 </table>
36</div>