与其将表中的MySQL数据显示为HTML表，不如将其显示在可编辑的文本框中

Question

I've managed to import data from my database table into an HTML table, however, I'd like to make them in locked text boxes and when an "edit" button is pressed, the corresponding text box will be unlocked, data can be changed and updated in the MySQL tables? How can I do this?

I've researched things for similar ways of putting them into text boxes however I did not find any clear answer.

$result = mysqli_query($con,"SELECT * FROM dados");

echo "<table border='2'>
<tr>
<th>nome</th>
<th>Idade</th>
<th>Email</th>
</tr>";

while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['nome'] . "</td>";
echo "<td>" . $row['idade'] . "</td>";
echo "<td>" . $row['email'] . "</td>";

echo "</tr>";
}
echo "</table>";

This is how the table is showing up on my PHP file, and everything shows fine, however, I'd like for each field to be a locked text box that on press of a button "edit" can be edited.

Answer 1

you can create new column with tow icon one for delete and other for edit when clicked on that button a javascript function will start and give it the id of that row it will use ajax to query and get the data of that row and open a modal to edit and you can use ajax to save data.

let's go step by step :

1- add new column

<?php
$result = mysqli_query($con, "SELECT * FROM dados");
echo "<table border='2'>
<tr>
<th>nome</th>
<th>Idade</th>
<th>Email</th>
<th>Edit</th>
</tr>";
while ($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['nome'] . "</td>";
echo "<td>" . $row['idade'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td><i class=\"fas fa-clock\" data-toggle="modal" data- 
target="#exampleModal" onclick=\"getDataForEdit(" . $row['id'] . 
")\"></i></td>";
echo "</tr>";
}
?>

2- create a modal to insert the data we will get from getDataForEdit function

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel"
 aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria- 
label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <form action="" method="post">
                    @csrf
                    <div class="md-form mb-4">
                        <label data-error="wrong" data-success="right" 
for="defaultForm-pass">title
                        </label>
                        <div class="row">
                            <div class="col-8">
                                <input type="text" name="name" id="defaultForm- 
pass"
                                       class="form-control validate">
                            </div>
                            <div class="col-2">
                                <input type="text" name="tag" id="defaultForm- 
pass-email"
                                       class="form-control validate">
                            </div>
                            <div class="col-2">
                                <button type="submit" class="btn btn- 
primary">submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save 
changes</button>
        </div>
    </div>
</div>
</div>

3- so now we should code javascript first we ajax and get the data of the row we want to edit then we insert that in the modal

<script>
function getDataForEdit(id) {
    var response = null;
    return $.ajax({
        type: 'GET',
        url: 'myanswerpage.php?id=' + id,
        success: function (data) {
            insertData(data.name,data.email);
        },
        error: function () {
            alert('getting data was not successful');

        }
    });
}
</script>

<script>
function insertData(name,email) {
    document.getElementById('defaultForm-pass').value = name;
    document.getElementById('defaultForm-pass-email').value = email;
}
</script>

so when ever you click the icon for edit a modal will open with the information of the row you want to edit.

Answer 2

You can use forms instead of tables and fetch all data and keep all the data in input tag as disabled.

By using jquery click event, you can make it editable and then write whatever you want and save it. This data on saving should be edited in database by including php and firing mysql update query.