Question

因此，我有一个弹出框，当我单击表格行时显示。在该框中应该是该表行中的值，但是，它是在同一弹出框中同时显示所有插入的行。

this is what happens when I open the box

这是打开弹出框的html代码：

<tr id="table_row_<?php echo $num; ?>" onclick="hide('table_row_<?php echo 
$num; ?>'), window.location= '#bg'">
<td style="font-family: Arial; font-size: 17px;"><?php echo $row['data']; ?> 
</td>
<td style="font-family: Arial; font-size: 17px;"><?php echo $row['sala']; ?> 
</td>
<td style="font-family: Arial; font-size: 17px;"><?php echo $row['tipo']; ?> 
</td>
</tr>
<script src="scripts/table.js"></script>
<div id="bg"></div>
<div class="box">
<?php
$result1 = mysqli_query($conn, "SELECT * FROM `ocorrencia` as o INNER JOIN 
`insere_material` as im ON o.id = im.id");
while ($row = mysqli_fetch_assoc($result1)): ?>
<p class="data"><?php echo $row['data']; ?></p>
<p class="sala"><?php echo $row['sala']; ?></p>
<p class="tipo"><?php echo $row['tipo']; ?></p>
<textarea readonly id="descricao"><?php echo $row['descricao'];?></textarea>
<?php endwhile;?>

JS：

function hide(tableRow){
var x = document.getElementById(tableRow);
if(x.style.display === "none"){
x.style.display = "block";
}else{
x.style.display = "none";
}
}

我确定我必须使用javascript来分隔值，但我仍在学习并且不知道该怎么做。

这是css框：

#rcorners1 {
border-radius: 20px;
background: #f2f2f2;
margin-top: -200px;
margin-left: -90px;
padding: 50px;
width: 800px;
height: 400px; 
}

这是使目标下降的目标：

#bg:target{
display: block;
}

#bg:target~.sala{
top:290px;
transition: all .3s;
transition-delay: .2s;
}

#bg:target~.box{
top:290px;
transition: all .3s;
transition-delay: .2s;
}

#bg:target~#close{
top:20px;
transition: all .3s;
transition-delay: .2s;
}

和值：

.data{
z-index: 0;
margin-left: 0px;
margin-top: -450px; 
position: absolute;
text-align: center;
font-family: Arial;
font-size: 23px;
}

.sala{
margin-left: 230px;
margin-top: -450px; 
position: absolute;
text-align: center;
font-family: Arial;
font-size: 23px;
}

.tipo{
margin-left: 380px;
margin-top: -450px; 
position: absolute;
text-align: center;
font-family: Arial;
font-size: 23px;
}

#descricao{
width: 600px; 
height: 180px;
resize: none;
margin-left: 0px;
margin-top: -280px; 
position: absolute;
font-family: Arial;
font-size: 18px;
}

不分离显示在同一弹出框中的所有数据库值

0 个答案: