编辑表格行

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)在onclick按钮中传递唯一的行id

4)在onclick函数中，借助唯一id，根据需要修改记录

注意：

• 您也可以为td提供唯一的id。
• 不要忘记递增id值。
• 删除提交按钮，如果您仍然想要提交按钮，请在执行onclick函数中的逻辑后返回true或false。

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 ()来呈现表单编辑，还需要定义插入新详细信息的插入函数，因为表单标记在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中创建表单，方法是将input标记的值赋给

document.getElementById("input_tag_id").value