3

I am trying to create table here where in I can pull up alll of my data from mysql.

enter image description here

I added two extra buttons on my field to edit and delete a specific item selected.

Right now I am not sure how I can turn the text to input fields (whenever I click on the "EDIT" button) and then edit the information and make the edit button turn to a save (on edit mode, where input is showing up) button so I can do the changes/updates. I am not sure too how can I get the ID so I can update that specific field.

So far here's my code:

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

And here's my main file...

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

Any idea how can I implement this?

Improve this question
3
  • 1
    i notice that your button contains id and it is inside the looping. This means all of your EDIT or DELETE buttons have the same id. That's not how the id works. Change it to class and make the id unique. Commented Jul 11, 2018 at 8:33
  • First question that springs in mind: are you planning to store your passwords as plain text in your database? That's not really safe. Replace $password with ******* and on edit let the user type a brand new password. Commented Jul 11, 2018 at 8:55
  • @Michel: For now yes. Don't mind the validation. Commented Jul 11, 2018 at 8:56

2 Answers 2

Reset to default
1

You have to call onclick jquery event, when click on any row's data. i think it will help you alot. https://codewithmark.com/easily-edit-html-table-rows-or-cells-with-jquery

Also fiddle code :- http://jsfiddle.net/9KEGd/

Enjoy code

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

that won't store the data into database
you can call ajax function and save the data into DB
How can I save the data then to DB mysql? I have the PHP code for updates though but how can I get the data? Please elaborate.
Also should it automatically change to input html if I click edit?
just go through it,markcell.github.io/jquery-tabledit/#examples
|
0

First, allow me to modify your original code to make things easier.

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>

I move the html part in php to html page. I also change the id to class in the looping because it contains the same value.

Now, to answer your question, create an onclick event for every EDIT button.

$('.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.
});

Once the edit button is clicked, it will transform data into input field on particular row. Clicked again on the button and it will be submitted and send to the server.

Link JSFiddle : http://jsfiddle.net/xpvt214o/400036/

Improve this answer

1 Comment

I think this is a good answer. Is there anyway you could show a demo?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.