我已经设法将我的数据库表中的数据导入到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文件中显示的方式,一切都很好,但是,我希望每个字段都是一个锁定的文本框,按下按钮“编辑”可以编辑。
您可以创建新列,其中拖动图标一个用于删除,另一个用于编辑,当单击该按钮时,javascript函数将启动并为其提供该行的ID,它将使用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">×</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>
因此,当您单击要编辑的图标时,将打开一个模式,其中包含您要编辑的行的信息。
您可以使用表单而不是表来获取所有数据,并将输入标记中的所有数据保持为禁用状态。
通过使用jquery click事件,您可以使其可编辑,然后编写您想要的任何内容并保存它。这个关于保存的数据应该通过包含php和触发mysql更新查询在数据库中进行编辑。