我实际上有一个包含行的表，单击一行后，我希望出现一个弹出框。我有它的div/HTML代码。但是，我不知道如何实现它的后端代码。
1.(用户单击行2.(它从该行获取额外信息：例如，该行仅显示$transactionID和$transactionAmount。然后用户单击一行，弹出一个框，显示$transactionID、$transactionAmount、$transaction Date和$reference
我该怎么做？我完全困惑了，试图到处寻找解决方案，但似乎找不到任何类似的例子
document.addEventListener("DOMContentLoaded", () =>{
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () =>{
// Not sure what to do here
})
})
}).transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr data-href='$value'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
}
</tbody>
</table>
</div>这是我的方法，但它不能正确工作：单击时它实际上不会更新值。单击一行后，它将不断显示表第一行的相同值
function displayTransaction() {
var x = document.getElementById("transactionBox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
#transactionBox{
position: relative;
display: none;
overflow: hidden;
}
transactionBox_class{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
transition: opacity 500ms;
opacity: 0;
}
.wrapper{
margin: 150px auto;
padding: 20px;
background: #e7e7e7;
border-radius: 5px;
width: 15%;
position: relative;
transition: all 5s ease-in-out;
}
.wrapper h2{
margin-top: 0;
color: #333;
}
.wrapper .close{
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.wrapper .content{
max-height: 30%;
overflow: auto;
}
.container{
border-radius: 5px;
background-color: #e7e7e7;
padding: 20px 0;
}
form label{
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
}
.container p{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<?php
/* $transactionList = displayTransfers($conn, $accountNumber); - This will display a row */
foreach ($transactionList as $value){
$transactionID = $value['transactionID'];
$transactionAmount = $value['amount'];
$transactionDate = $value['transactionDate'];
$reference = $value['reference'];
echo "<tr onclick='displayTransaction()'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox'>
<div class='wrapper'>
<h2>Transaction Details</h2>
<div class='content'>
<div class='container'>
<form>
<label>Transaction ID:</label>
<p>$transactionID</p>
<label>Amount:</label>
<p>$transactionAmount</p>
<label>Date:</label>
<p>$transactionDate</p>
<label>Reference:</label>
<p>$reference</p>
</form>
</div>
</div>
</div>
</div>";
}
?>
</tbody>
</table>
</div>
</body>您可以创建一个名为visible之类的类，并在单击时将其添加到中的子类中。
您可以使用element.classList.add("my-class");来添加一个类(.remove("myclass"(来删除它(
在分析foreach循环后，我可以看到表中有一些行正在被填充，但对于transactionBox的每个事务划分，id都保持不变，这就是为什么只得到第一行，这是具有id的第一个元素。
解决方案：-
- 为行的每个事务划分创建一个动态ID
echo "<tr onclick='displayTransaction(".$transactionID.")'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox_".$transactionID."'>
<div class='wrapper'>
<h2>Transaction Details</h2>
- 使用自定义属性，但yaah是唯一的
echo "<tr onclick='displayTransaction(this)' transation='".$transactionID."'>";
echo "<td style='background-color:$colour'>$transactionID</td>";
echo "<td class='amount' style='background-color: $colour'>$transactionAmount</td>";
echo "</tr>";
echo "<div class='transactionBox_class' id='transactionBox' transaction-type='".$transactionID"'>
<div class='wrapper'>
<h2>Transaction Details</h2>
工作示例如下。
function showDetails_1(elem){
var actual_elem = "#transaction_"+elem;
console.log(actual_elem)
$(actual_elem).attr("style","display:block");
}
function showDetails_2(elem){
var actual_elem = "[transaction-type="+$(elem).attr("transaction")+"]";
console.log(actual_elem);
$(actual_elem).attr("style","display:block");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=3>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_1(433)">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction_433">
Yo..! here are the details_1
</div></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td><button onclick="showDetails_2(this)" transaction="433">show</button></td></tr>
<tr>
<td colspan="4">
<div class="tansaction" style="display:none" id="transaction" transaction-type="433">
Yo..! here are the details_2
</div></td>
</tr>
</table>