注意：我不能使用jQuery，我需要在JavaScript，PHP，SQL，HTML和CSS之间使用混合物。
我想发生的事情是能够单击客户号码，并显示出一个DIV，显示个人客户的电话号码，销售代表名称和信用额度。
我正在实施此操作的方式是具有PHP，同时循环从SQL数据库获取数据并将记录输出到表中。在OnClick事件中，我将额外的表实现为一个函数（$ orderText）。
我遇到的功能是第二个表的customerDetails（）。第一个效果很好。我有在CSS样式表中填写的DIV，以便固定位置。
<?php
require_once "dbconfig.php";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname;charset=UTF8",
$username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
echo "Connected successfully";
$sql = 'SELECT DISTINCT
O.orderDate, O.customerNumber, O.comments, O.status, O.orderNumber,
OD.productCode, P.productLine, P.productName
FROM orders O
JOIN orderdetails OD on O.orderNumber = OD.orderNumber
JOIN products P ON OD.productCode = P.productCode
WHERE O.status = "In Process"
ORDER BY O.orderNumber';
$q = $conn->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC);
$sql2 = 'SELECT
O.orderNumber, O.orderDate, O.customerNumber, O.comments, O.status, C.phone, C.salesRepEmployeeNumber as repNumber, C.creditLimit, concat(E.firstName, " ", E.lastName) as repName, E.employeeNumber
FROM orders O
JOIN customers C on O.customerNumber = C.customerNumber
JOIN employees E on C.salesRepEmployeeNumber = E.employeeNumber
ORDER BY O.orderDate desc LIMIT 20';
$q2 = $conn->query($sql2);
$q2->setFetchMode(PDO::FETCH_ASSOC);
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
?>
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href='orders.css'>
</head>
<body>
<div>
<div class="jsbox" id="orderDetails" ></div>
<table>
<thead>
<tr>
<th>Order Number</th>
<th>Order Date</th>
<th>Status</th>
<th>Customer Number</th>
</tr>
</thead>
<tbody>
<?php while ($r = $q->fetch()): ?>
<?php $text = "<table><tr><th>Product Code</th><th>Product Line</th><th>Product Name</th><th>Comments</th>";
$text .= "<tr><td>" . htmlspecialchars($r['productCode']) . "</td>";
$text .= "<td>" . htmlspecialchars($r['productLine']) . "</td>";
$text .= "<td>" . htmlspecialchars($r['productName']) . "</td>";
$text .= "<td>" . htmlspecialchars($r['comments']) . "</td></table>" ?>
<tr>
<td ><?php echo "<button onclick="myFunction('$text')">" . htmlspecialchars($r['orderNumber']) . "</button>" ?></td>
<td><?php echo htmlspecialchars($r['orderDate']) ?></td>
<td><?php echo htmlspecialchars($r['status']) ?></td>
<td><?php echo htmlspecialchars($r['customerNumber']) ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<script type="text/javascript">
function myFunction(msg) {
document.getElementById("orderDetails").innerHTML = msg;
}
</script>
<div>
<div class="jsbox" id="customerOrderDetails" ></div>
<table>
<thead>
<tr>
<th>Order Number</th>
<th>Order Date</th>
<th>Status</th>
<th>Customer Number</th>
</tr>
</thead>
<tbody>
<?php while ($s = $q2->fetch()): ?>
<tr>
<?php $orderText = "<table><tr><th>Phone Number</th><th>Rep Name</th><th>Credit Limit</th>";
$orderText .= "<tr><td>" . htmlspecialchars($s['phone']) . "</td>";
$orderText .= "<td>" . htmlspecialchars($s['repName']) . "</td>";
$orderText .= "<td>" . htmlspecialchars($s['creditLimit']) . "</td></tr></table>"; ?>
</tr>
<tr>
<td><?php echo htmlspecialchars($s['orderNumber']) ?></td>
<td><?php echo htmlspecialchars($s['orderDate']) ?></td>
<td><?php echo htmlspecialchars($s['status']) ?></td>
<td><?php echo "<button onclick="customerDetails('$orderText')">" . htmlspecialchars($s['customerNumber']) . "</button>" ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<script type="text/javascript">
function customerOrder(msg) {
document.getElementById("customerDetails").innerHTML = msg;
}
</script>
</body>
</html>
特别是我需要修复的区域是
<div>
<div class="jsbox" id="customerOrderDetails" ></div>
<table>
<thead>
<tr>
<th>Order Number</th>
<th>Order Date</th>
<th>Status</th>
<th>Customer Number</th>
</tr>
</thead>
<tbody>
<?php while ($s = $q2->fetch()): ?>
<tr>
<?php $orderText = "<table><tr><th>Phone Number</th><th>Rep Name</th><th>Credit Limit</th>";
$orderText .= "<tr><td>" . htmlspecialchars($s['phone']) . "</td>";
$orderText .= "<td>" . htmlspecialchars($s['repName']) . "</td>";
$orderText .= "<td>" . htmlspecialchars($s['creditLimit']) . "</td></tr></table>"; ?>
</tr>
<tr>
<td><?php echo htmlspecialchars($s['orderNumber']) ?></td>
<td><?php echo htmlspecialchars($s['orderDate']) ?></td>
<td><?php echo htmlspecialchars($s['status']) ?></td>
<td><?php echo "<button onclick="customerDetails('$orderText')">" . htmlspecialchars($s['customerNumber']) . "</button>" ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<script type="text/javascript">
function customerOrder(msg) {
document.getElementById("customerDetails").innerHTML = msg;
}
</script>
您忘记了分号。您也可以在没有逃生字符的情况下执行此操作，简单地您可以写：
<?php echo "<button onclick='customerDetails(".$orderText.");'>"