Вместо отображения данных MySQL из таблиц в таблицы HTML, отображайте их в редактируемых текстовых полях

Question

Мне удалось импортировать данные из моей таблицы базы данных в таблицу HTML, однако я хотел бы сделать их в заблокированных текстовых полях, и при нажатии кнопки «Изменить» соответствующее текстовое поле будет разблокировано,данные могут быть изменены и обновлены в таблицах MySQL?Как я могу это сделать?

Я искал вещи для похожих способов поместить их в текстовые поля, однако я не нашел никакого четкого ответа.

$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>";

Вот как выглядит таблицаотображается в моем PHP-файле, и все выглядит нормально, однако, я бы хотел, чтобы каждое поле было заблокированным текстовым полем, которое при нажатии кнопки «редактировать» можно редактировать.

Answer 1

Вы можете создать новый столбец со значком буксировки, один для удаления, а другой для редактирования, при нажатии на эту кнопку запустится функция javascript, и ей будет присвоен идентификатор той строки, с помощью которой ajax будет запрашивать и получать данные этой строки иоткройте модал для редактирования, и вы можете использовать ajax для сохранения данных.

давайте пошагово:

1 - добавить новый столбец

<?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 - создатьмодально вставить данные, которые мы получим из функции getDataForEdit

<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 - так что теперь мы должны сначала написать javascript, используя ajax, и получить данные строки, которую мы хотим редактировать, затем вставить ее в модал

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

, поэтому, когда вы нажимаете значок для редактирования, открывается модальное окно с информацией о строке, которую вы хотите редактировать.

Answer 2

Вы можете использовать формы вместо таблиц, извлекать все данные и сохранять все данные во входном теге как отключенные.

Используя jquery событие клика, вы можете сделать его редактируемым, а затем написать все, что хотите, и сохранить его. Эти данные о сохранении должны быть отредактированы в базе данных путем включения php и запуска mysql update update.