Javascript 使用php和MySQL的Table accordion
我正试图为从数据库获得的数据制作一个手风琴表。 只想在点击行后在下面的行中显示描述数据。我一直在尝试修改我找到的很多代码 例如：（这就是我想要的） 或下面显示的代码 我主要得到实际表上方的原始描述数据Javascript 使用php和MySQL的Table accordion,javascript,php,jquery,mysql,html,Javascript,Php,Jquery,Mysql,Html,我正试图为从数据库获得的数据制作一个手风琴表。 只想在点击行后在下面的行中显示描述数据。我一直在尝试修改我找到的很多代码 例如：（这就是我想要的） 或下面显示的代码 我主要得到实际表上方的原始描述数据 <body> <?php include("info.php"); $query = "SELECT * FROM list1 ORDER BY `FName` ASC"; $result = mysql_query($query); ?
<body>
<?php
include("info.php");
$query = "SELECT * FROM list1 ORDER BY `FName` ASC";
$result = mysql_query($query);
?>
<table class="research">
<tr>
<th>Name</th>
<th>URL</th>
<th>Age</th>
<th>Address</th>
</tr>
<?php while($row = mysql_fetch_array($result)):?>
<tr class="accordion">
<td>
<?php echo $row['FName'];?>
</td>
<td>
<?php echo "<a href='http://".$row['URL']."'>".$row['URL']."</a>"?>
</td>
<td>
<?php echo $row['Age'];?>
</td>
<td>
<?php echo $row['Address'];?>
</td>
</tr>
<tr>
<?php echo $row['Description'];?>
</tr>
<?php endwhile;?>
</table>
<script>
$(function () {
$(".research tr:not(.accordion)").hide();
$(".research tr:first-child").show();
$(".research tr.accordion").click(function () {
$(this).nextAll("tr").fadeToggle("fast");
});
});
</script>
名称
统一资源定位地址
年龄
地址
$（函数（）{
$（“.research tr:not（.accordion）”）.hide（）；
$（“.research tr:first child”）.show（）；
$（“.research tr.accordion”）。单击（函数（）{
$（此）.nextAll（“tr”）.fadeToggle（“快速”）；
});
});
网络
希登罗先生{
填充：0！重要；
}
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
tr.accordion.active，tr.accordion:悬停{
背景色：#ddd；
}
手风琴{
内容：“\002B”；
颜色：#777；
字体大小：粗体；
浮动：对；
左边距：5px；
}
手风琴激活：之后{
内容：“\2212”；
}
tr.panel{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
名称
统一资源定位地址
年龄
地址
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i