编辑表格行[关闭]

1) Add unique row id while rendering the list of records

2) Add onclick for button

3) Pass the unique row id in the button onclick

4) In the onclick function, with the help of unique id, modify the record as your wish

Note:

• You can give unique id for td's too.
• Don't forget to increment the id value.

• Remove the submit button, if you still want submit button, please return true or false after executing the logic in onclick function.

  <?php
                $count = 1;
                while($row = mysqli_fetch_assoc($result))
              {   
                 ?>
                     <tr id="uniquetrId+count"> <!-- increase this id for each loop iteration -->
                        <td>
                           <? echo  $row['first_name']; ?>
                        </td>
                        <td>
                           <? echo  $row['last_name']; ?>
                        </td>
                        <td >
                           <? echo  $row['email_phoneno']; ?>
                        </td>
                        <td >
                           <button type="button" name="edit" alt="Edit" value="Edit" class="btn blue" "write a onclick function and pass the unique trid">Edit</button>
                        </td>
                      </tr>
  
              <?php
              $count++;
                 }
              ?>
  

Please find the jquery function to attain this in js fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table>

  <tr>
    <td>
      John
    </td>
    <td>
      Smith
    </td>
    <td>
      12345
    </td>
    <td>
      <button type="button" name="edit" alt="Edit" value="Edit" id="edit_0" class="btn editButton blue">Edit</button>
    </td>
  </tr>
</table>

$('.editButton').click(function() {

  var htmlFirstName = "<input class='form-control placeholder-no-fix' type='text' autocomplete='off' placeholder='First Name' name='first_name' />";
  var htmlLastName = "<input class='form-control placeholder-no-fix' type='text' autocomplete='off' placeholder='Last Name' name='last_name' />";
  var htmlEmailPhone = "<input class='form-control placeholder-no-fix' type='text' autocomplete='off' placeholder='Email/PhoneNo' name='email_phoneno' />";
  var htmlAddButton = "<button type='submit' name='add' alt='Add' value='Add' class='btn blue'>Add</button>";
  $(this).parent().parent().children("td:eq(0)").empty();
  $(this).parent().parent().children("td:eq(0)").append(htmlFirstName);
  $(this).parent().parent().children("td:eq(1)").empty();
  $(this).parent().parent().children("td:eq(1)").append(htmlLastName);
  $(this).parent().parent().children("td:eq(2)").empty();
  $(this).parent().parent().children("td:eq(2)").append(htmlEmailPhone);
  $(this).parent().parent().children("td:eq(3)").replaceWith(htmlAddButton);
});

1.first assign id to each tr tag

<?
$i=0;
$sql="SELECT * from `candidates` ORDER BY id DESC";
$result = mysqli_query($con, $sql);
if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
            {  $id++; 
                ?>
                    //here im putting id to tr .....
                    <tr id=<?php echo $id; ?> >
                        <td>
                             <? echo  $row['first_name']; ?>
                        </td>
                        <td>
                              <? echo  $row['last_name']; ?>
                        </td>
                        <td >
                             <? echo  $row['email_phoneno']; ?>
                        </td>
                        <td >
                             <button type="submit" name="edit" alt="Edit" value="Edit" class="btn blue" onclick="edit(<?php echo $i; ?> )">Edit</button>
                        </td>
                    </tr>
            <?}
    }
?>

2.Now define JavaScript functi0n edit() for rendering your form also you need to define insert function for insert new details because form tag does not work within tr tag.

function edit(id){
       var row=document.getElementById(id);
       row.innerHTML='<td><input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="First Name" name="first_name"></td>'+
        '<td><input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Last Name" name="last_name" ></td>'+
        '<td><button type="button" name="add" alt="Add" value="Add" class="btn blue" onclick="submit()">Add</button></td></form>';
}

3.Now you need to define submit() function for inserting new value. For this you can use ajax call or do create form in javascript by assign value of input tag using

document.getElementById("input_tag_id").value