编辑表格行[关闭]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> Update the question so it focuses on one problem only by <a href="/posts/37917190/edit">editing this post</a>.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2016-06-20 09:24:27Z" class="relativetime">3 years ago</span>.</p>
                </div>
            </div>
    </aside>

I have html data that fetches data from database, it's view and code is given below

View

Code

<?
$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))
            {   
                ?>
                    <tr>
                        <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">Edit</button>
                        </td>
                    </tr>
            <?}
    }
?>

I want that when a user clicks on edit button of a particular row then that row's data should get changed and its view should become like this, and the code should be like given below

New View

New Code

<form action="insert.php" method="post" enctype="multipart/form-data" >
    <tr>
        <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 >
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email/PhoneNo" name="email_phoneno" />
        </td>
        <td>
             <button type="submit" name="add" alt="Add" value="Add" class="btn blue">Add</button>
        </td>
    </tr>
</form>

Can anyone please tell how it can be done

</div>

Answer 1

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

Answer 2

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

Answer 3

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