Question

我试图在这里创建表，可以在其中从mysql提取所有数据。

我在字段上添加了两个额外的按钮，用于编辑和删除所选的特定项目。

现在，我不确定如何将文本转换为输入字段（无论何时单击“编辑”按钮），然后编辑信息并使编辑按钮变为保存状态（在编辑模式下，输入正在显示）按钮，以便我可以进行更改/更新。我也不确定如何获取ID，以便更新该特定字段。

到目前为止，这是我的代码：

  function readData(){
    global $connection;

    $query = "SELECT * FROM users";

    $result = mysqli_query($connection, $query);

   if(!$result) {
       die('Query FAILED' . mysqli_error());
    }

     while($row = mysqli_fetch_assoc($result)){ 
      $id = $row['id'];
      $username = $row['username'];
      $password = $row['password'];

      echo '<tr>';
      echo "<td>$id</td>";
      echo "<td>$username</td>";
      echo "<td>$password</td>";
      echo "<td><button id='edit' name='edit'>EDIT</button></td>";
      echo "<td><button id='delete' name='delete'>DELETE</button></td>";
      echo '</tr>';
     }
  }

  function editDate(){
    global $connection;

    $query = "UPDATE users SET ";
    $query .= "username = '$username', ";
    $query .= "password = '$password' ";
    $query .= "WHERE id='$id'";

    $result = mysqli_query($connection, $query);
    if(!$result){
      die('QUERY FAILED' . mysqli_error($connection));
    }
  }

这是我的主文件...

<?php 
   include 'functions.php';
?>

<?php include 'includes/header.php' ?>


<table style="width: 200px;" border="1">
  <tr>
    <th>ID</th>
    <th>USERNAME</th> 
    <th>PASSWORD</th>
    <th>EDIT</th>
    <th>DELETE</th>
  </tr>
  <tr>
    <?php readData(); ?>
  </tr>
</table>


<?php include 'includes/footer.php' ?>

任何想法我该如何实现？

Answer 1

点击任意行的数据时，您必须致电onclick jquery event。我认为它将对您有很大帮助。 https://codewithmark.com/easily-edit-html-table-rows-or-cells-with-jquery

还有小提琴代码：-http://jsfiddle.net/9KEGd/

享受代码

Answer 2

首先，请允许我修改您的原始代码以使事情变得更容易。

PHP

function readData(){
    global $connection;

    $query = "SELECT * FROM users";
    $result = mysqli_query($connection, $query);

    if (!$result) {
        die('Query FAILED' . mysqli_error());
    }

    $dataArray = array();
    while($row = mysqli_fetch_assoc($result)){
        $dataArray[] = $row;
    }
    return $dataArray;
}

HTML

<table style="width: 200px;" border="1">
    <tr>
        <th>ID</th>
        <th>USERNAME</th> 
        <th>PASSWORD</th>
        <th>EDIT</th>
        <th>DELETE</th>
    </tr>
    <tr>
        <?php foreach (readData() as $key => $data): ?>
            <form method="POST">
                <td><?php echo $data['id']; ?></td>
                <td><?php echo $data['username']; ?></td>
                <td><?php echo $data['password']; ?></td>
                <td>
                    <button class='edit' name='edit'>EDIT</button>
                </td>
                <td>
                    <button class='delete' name='delete'>DELETE</button>
                </td>
                <input type="hidden" value="<?php echo $data['id']; ?>" />
            </form>
        <?php endforeach; ?>
    </tr>
</table>

我将php中的html部分移至html页面。我还将循环中的id更改为class，因为它包含相同的值。

现在，要回答您的问题，请为每个EDIT按钮创建一个onclick事件。

$('.edit').on('click', function(){
    var id = $(this).parent().prev().prev().prev().text(); // move to first td
    var td2 = $(this).parent().prev().prev();
    var td3 = $(this).parent().prev();
    var username = td2.text();
    var password = td3.text();
    td2.empty();
    td3.empty();
    td2.append($('<input type=text name=username value='+username+' />'));
    td3.append($('<input type=text name=password value='+password+' />'));
    $(this).attr('class', 'submit'); // change the class name so it won't fired the next time the button gets clicked
    $(this).attr('type', 'submit'); // add type submit on edit button so once the button is clicked, the data will be send to server.
});

单击编辑按钮后，它将把数据转换为特定行上的输入字段。再次单击该按钮，它将被提交并发送到服务器。

链接JSFiddle：http://jsfiddle.net/xpvt214o/400036/

如何将DATA转换为输入字段-PHP

2 个答案: