我正在使用 PHP 在我的登录系统中绘制一个使用表，下面是 HTML/PHP 代码，
session_start();
include_once("../iConnect/handShake.php");
$getUsers = "SELECT * FROM userlogin ORDER BY uId ASC";
$getUsersQuery = $dbConnect -> query($getUsers);
?>
<html>
<head>
<title></title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- JavaScritps -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/userListFunctions.js"></script>
</head>
<body>
<div id="divCenter" class="box">
<div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;">
<img src="../../images/logo.png" width="142" height="33">
</div>
<div id="mainDiv">
<div id="navi"></div>
<div id="infoi"></div>
<table id="hor-minimalist-b">
<div id="bgDimmer"></div>
<div id="divContent"></div>
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Team</th>
<th scope="col">Created By</th>
<th scope="col">Created Date</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php while ($row = $getUsersQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
<tr>
<td id="uId"><?php echo $row["uId"]; ?></td>
<td id="fName"><?php echo $row["fName"]; ?></td>
<td id="lName"><?php echo $row["lName"]; ?></td>
<td id="team"><?php echo $row["uTeam"]; ?></td>
<td id="cBy"><?php echo $row["createdBy"]; ?></td>
<td id="uCd"><?php echo $row["uCreateDate"]; ?></td>
<td><input type="button" class="uEdit" name="uEdit" id="uEdit" value="Edit" /></td>
<td><a href="deleteUser.php?id=<?php echo $row["uId"] ?>"><input type="button" name="uDelete" id="uDelete" value="Delete" /></a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div id="msg"></div>
</body>
</html>
问题 1:
我正在尝试使用 java 脚本从列 ID 中提取用户 ID，它确实通过使用 document.getElementById("uId").innerText 来提取它，但它只需要第一行，即使如果我点击其他编辑按钮。
我的Java脚本代码:
$(document).ready(function () {
$('.uEdit').click(function (){
// getUserId();
var uId = document.getElementById("uId").innerText;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("msg").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","editUser.php?uId="+uId,true);
xmlhttp.send();
$('#bgDimmer').show();
$('#divContent').show().load('editUser.php');
});
$(document).mouseup(function(x) {
var container = $("#divContent"),
dimmer = $('#bgDimmer');
if (container.is(":visible")) {
if (!container.is(x.target) //check if the target of the click isn't the container...
&& container.has(x.target).length === 0) {
container.hide();
dimmer.hide();
}
}
});
$('#close').click(function () {
$('#bgDimmer').hide();
$('#divContent').hide();
});
});
问题 2: 我上面的代码还有另一个问题，当我通过相同的函数将数据发送到除 editUSer.php 之外的另一个 PHP 时，它不会被提交，但是当我发送到另一个 php 然后回显它刚刚显示的数据时但我只想将 ID 直接发送到 editUser.php 文件并将当前现有数据填充到字段中。
有人可以帮我解决这个问题吗？
更新: 我尝试了下面的答案，但问题仍然存在。
更新2: 下面的代码正在获取 ID，但由于某种原因它没有被发送到处理 php，有人可以告诉我为什么吗？
var uId = $(this).data("uid");
// alert(uId);
$.post("test.php?uId="+uId,function() {
$('#bgDimmer').hide();
$('#divContent').load('test.php',function(){
$(this).show();
$('#bgDimmer').show();
});
});
更新3:
成功!我设法解决了问题，下面描述了发生的情况以及我如何解决它。
所以这就是我上面发布的代码所发生的情况，正如您所看到的，我试图将一个值发送到名为 editUser.php 的页面，该页面将捕获该值并使用它从该数据库获取详细信息并将其归档用户编辑表单的字段。
但是它不起作用我使用@mplungjan的代码但仍然没有任何结果。加载表单时，主按钮单击事件没有发送任何数据。我在 editUser.php 中回显发送的值。
在我几乎抓狂之后，我查看了浏览器控制台，特别是网络选项卡。天哪，有 2 个实例看起来像这样 http://editUser.php?uId=1另一个http://editUser.php .
实际上发生的事情是第一个发送了数据，但第二个加载了没有数据的数据，这是由 '#divContent').load('editUser.php' 调用的，这导致了由于没有要捕获的数据而导致错误未定义索引。
好吧，解决方案很简单，但我的逻辑有缺陷(人为错误 - 是的，我仍然是人类)。我要做的就是通过加载页面的同一命令发送数据。我仍然有 @mplungjan 代码中的一小部分代码，但其余部分是我的，下面是使其工作的解决方案。
$('.uEdit').click(function (){
var uId = $(this).data("uid");
$('#bgDimmer').show();
$('#divContent').show().load('editUser.php?uId='+uId);
});
});
希望这对将来的人有所帮助。
最佳答案
- ID 必须是唯一的。
- 使用 jQUery 和 $.ajax 现在你已经掌握了。你正在以一种非常不健康的方式混合 DOM 和 jQuery
- 切勿删除链接!!! GoogleBot 抓取一次，您的数据库为空
一个几乎没有变化的例子
$('.uEdit').on("click",function (){
// getUserId:
var uId = $(this).parent().siblings(":first").text();
$.post("editUser.php?uId="+uId,function() {
$('#bgDimmer').show();
$('#divContent').show().load('editUser.php');
});
});
更好的例子
<td><input type="button" class="uEdit" value="Edit"
data-uid="<?php echo $row["uId"] ?>" /></td>
<td><input type="button" class="uDel" value="Delete"
data-uid="<?php echo $row["uId"] ?>" /></td>
并且有
$('.uEdit').on("click",function (){
// getUserId:
var uId = $(this).data("uid");
$('#bgDimmer').show();
$('#divContent').load('editUser.php',function(){ // this is a GET!
$(this).show();
});
});
$('.uDel').on("click",function (){
// getUserId:
var uId = $(this).data("uid");
$.post("deleteUser.php?uId="+uId,function() { // OR $.get if needed
// show deleted
});
});
关于javascript - 使用 JavaScript 从 HTML 表获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43730521/