【发布时间】：2018-06-27 17:22:58
【问题描述】：
下面是我的 HTML：
<form method="post" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-condensed1" >
<tbody>
<tr>
<td>Email</td>
<td><span><?php echo $row['Admin_Email'];?></span> <input type="text" name="email" size="30" autocomplete="off" class="hidden"></td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td>Name </td>
<td><span><?php echo $row['Admin_Name'];?></span> <input type="text" name="name" size="30" autocomplete="off" class="hidden"></td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td>Gender</td>
<td><span><?php echo $row['Admin_Gender'];?></span> <input type="text" name="gend" size="10" autocomplete="off" class="hidden"></td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td >Date of Birth</td>
<td><span><?php echo $row['Admin_DOB'];?></span> <input type="date" name="dob" autocomplete="off" class="hidden"></td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td >Contact Number</td>
<td><span><?php echo $row['Admin_ContactNum'];?></span> <input type="text" name="num" size="15" autocomplete="off" class="hidden"></td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
<tr>
<td>Address</td>
<td><span><?php echo $row['Admin_Address'];?></span> <input type="text" name="add" size="100" autocomplete="off" class="hidden"></td>
<td><a href="#" class="edit">Edit</a></td>
</tr>
</tbody>
</table>
</form>
隐藏class="hidden"文本框的CSS代码：
.hidden {
display: none;
}
我的jQuery将编辑更改为保存并显示一个输入文本框，然后当用户点击保存时显示一个通知栏：
<script>
$(document).ready(function(){
$(".table").on("click", ".edit", function() {
var prevTD = $(this).parent().prev();
var value = prevTD.find("span").hide().text();
prevTD.find("input").show().val(value);
$(this).toggleClass("edit save").text("Save");
}).on("click", ".save", function() {
var prevTD = $(this).parent().prev();
var value = prevTD.find("input").hide().val();
prevTD.find("span").show().text(value);
$(this).toggleClass("edit save").text("Edit");
$("form").submit(function() { $(this).find("input").show(); });
jNotify(
'<img src="../Images/success.png" height="15px"/> Profile updated!',
{
autoHide : true,
MinWidth: 150,
TimeShown : 2500,
OpacityOverlay : 0 ,
HorizontalPosition : 'right',
VerticalPosition: 'bottom'
})
});
});
</script>
我的 PHP 代码更新我的成员表：
$email = $_POST["email"];
$name = $_POST["name"];
$gend = $_POST["gend"];
$dob = $_POST["dob"];
$num = $_POST["num"];
$address1 = $_POST["add"];
mysqli_query($conn, "UPDATE admin SET Admin_Email ='$email' , Admin_Name='$name', Admin_Gender='$gend', Admin_DOB='$dob', Admin_ContactNum='$num', Admin_Address='$address1' WHERE Admin_ID=$id");
我无法检索在<input type="text" name="name" size="30" autocomplete="off" class="hidden"> 中输入的文本。如何检索此文本？我想获取文本并在我的 php 中声明我可以在其中执行 $name = $_POST["name"]; 并更新我在数据库中的表。
【问题讨论】：
-
看看
contenteditable属性。 -
我希望它只有在我点击编辑按钮时才可编辑
-
欢迎来到 SO。请注意——假设您将自己编写所有代码。我们不会经常在这里分发代码，但我们会为您指明正确的方向。我强烈建议您编辑问题以征求关于方法 的建议，而不是代码。 （我们这样做的主要原因......如果你不自己编写代码，你实际上不会学到任何东西。）
-
您好，感谢您的建议。我已经编辑了我的帖子。
标签： php jquery css html-table