Question

我有从数据库中获取数据的html数据，它的视图和代码如下所示

查看

代码

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

我希望当用户点击特定行的编辑按钮时，该行的数据应该更改，其视图应该如下所示，代码应如下所示

新视图

新代码

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

任何人都可以告诉我们该怎么做

Answer 1

1）在渲染记录列表时添加唯一行ID

2）添加onclick按钮

3）在按钮上单击

中的唯一行ID

4）在onclick功能中，借助唯一ID，根据需要修改记录

注意：

您也可以为td提供唯一ID。
不要忘记增加id值。

删除提交按钮，如果您仍想要提交按钮，请在执行onclick功能中的逻辑后返回true或false。

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

请在js fiddle

中找到jquery函数

<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. 首先为每个tr标签分配ID

<?
$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.现在定义JavaScript functi0n edit（）以呈现表单 您还需要定义插入函数以插入新的详细信息，因为表单标记在tr标记中不起作用。

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.现在需要定义submit（）函数以插入新值。为此，您可以使用ajax调用或通过使用

指定输入标记的值来在javascript中创建表单

document.getElementById("input_tag_id").value

编辑表格行

3 个答案: