所以,我正在用HTML,PHP,CSS和jQuery编写一个网页。这个数据库来自一个mysql数据库,它可以很好地获取数据。但是,它会运行两个查询。
输出表格的 PHP / HTML 代码如下:
function OutputAll($MariaDB, $startdate){
$SQL = "SELECT lotNum, jobNum, date, material FROM manufacturing WHERE date >= '".$startdate."' ORDER BY date;";
$result = $MariaDB->Query($SQL);
if (! $result === FALSE) {
// output data of each row
?>
<table align="center" class="TableMainDesign" style="overflow: hidden;">
<thead>
<th>Lot Number</th>
<th>Job Name</th>
<th>Date</th>
<th>Material</th>
</thead>
<tbody style='overflow: hidden;'>
<?php
while($row = $result->fetch_assoc()) {
echo "<tr class='lotRow'><td>".$row["lotNum"]."</td><td>".$row["jobNum"]."</td><td>".date("m/d/Y", strtotime($row["date"]))."</td><td>".$row["material"]."</td>";
$SQL2 = "SELECT itemdata.lotNum AS 'Lot Number', itemdata.itemNum AS 'Item Number', itemconnectors.Connector1 AS 'Connector 1', ";
$SQL2 .= "itemconnectors.Connector2 AS 'Connector 2', itemconnectors.S1 AS 'Spec 1', ";
$SQL2 .= "CONCAT(FORMAT(itemdimensions.Short_Side_1, 2), ' x ', FORMAT(itemdimensions.Long_Side_1, 2), ' x ', ";
$SQL2 .= "FORMAT(itemdimensions.Short_Side_2, 2), ' x ', FORMAT(itemdimensions.Long_Side_2, 2)) AS 'Dimensions' FROM itemdata ";
$SQL2 .= "INNER JOIN harringtondb.itemconnectors ON itemdata.lotNum=itemconnectors.lotnum AND itemdata.itemNum=itemconnectors.itemNum ";
$SQL2 .= "INNER JOIN harringtondb.itemdimensions ON itemconnectors.lotNum=itemdimensions.lotNum AND itemdata.itemNum=itemdimensions.itemNum ";
$SQL2 .=" WHERE itemdata.lotNum = '".$row["lotNum"]."'";
$SQL2 .= " ORDER By itemdata.itemNum ASC;";
$result2 = $MariaDB->Query($SQL2);
if (! $result2 === FALSE){
?>
<tr class ="hiddenItemdata"><td class ="hiddenItemdata" colspan="4">
<table class ="hiddenItemdata">
<thead>
<th class ="hiddenItemdata">Lot Number</th>
<th class ="hiddenItemdata">Item Number</th>
<th class ="hiddenItemdata">Connector 1</th>
<th class ="hiddenItemdata">Connector 2</th>
<th class ="hiddenItemdata">Spec 1</th>
<th class ="hiddenItemdata">Dimensions</th>
</thead>
<tbody>
<?php
while($row2 = $result2->fetch_assoc()){
echo "<tr class='test'><td>".$row2["Lot Number"]."</td><td>".$row2["Item Number"]."</td><td>".$row2["Connector 1"]."</td><td>".$row2["Connector 2"]."</td><td>".$row2["Spec 1"]."</td><td>".$row2["Dimensions"]."</td></tr></tr>";
}
?></tbody></table></td></tr><?php
}else{
echo "0 Results!";
?></tr><?php
}
}
} else {
echo "0 results";
}
?>
</tbody>
</table>
<?php
}
Relevent CSS 就在这里:
.TableMainDesign{
border: 0 #3D72A4;
width: 600;
cellspacing: 10;
cellpadding: 10;
color: black;
text-align: center;
border-collapse: collapse;
width: 75%;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #31BCEB;
color: BLACK;
text-align: center;
border: 1px solid #ddd;
}
.TableMainDesign, td {
border: 1px solid #ddd;
text-align: left;
}
.TableMainDesign td {
height: 20px;
}
.hiddenItemdata{
display: none;
}
以下是我认为错误实际存在的地方,在jQuery Here:
$('.lotRow').click(function(){
// $('.hiddenItemdata').slideToggle('slow');
//$(this).find('.hiddenItemdata').show();
$(this).closest('tr').next().find('.hiddenItemdata').slideToggle('slow');
});
注释行是尝试的解决方案。我想要做的基本上是,一旦lotrow
被点击(tr tag
),我就会喜欢hiddenitemdata
类的所有内容,相对于那个低行标记。我试图找到下一个tr标签,并使用next来获取tr,然后使用“find
”获取类名来显示它。任何帮助表示赞赏。
简单来说,我只想尝试显示相关的嵌套表,而不是全部。
答案 0 :(得分:0)
尝试
$('.lotRow').click(function(){
$(this).next('.hiddenItemdata').slideToggle('slow');
});
旁注:在输出数据时混合数据库查询是不好的做法。最好先进行所有查询,使用适当的数据结构来保存数据,然后使用您制作的数据结构输出数据。
:您对.hiddenItemdata
过度使用。只需在TR上使用它。不需要把它放在所有的孩子身上。
这里很快demo。