表手风琴使用PHP和MySQL [英] Table accordion using php and MySQL
本文介绍了表手风琴使用PHP和MySQL的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为从数据库获取的数据制作手风琴表。
只想在点击行后显示下面一行中的描述数据。我一直在尝试修改我发现的大量代码。
I'm trying to make an accordion table for data obtained from database. Just want to show description data in row below after clicking on row.I have been trying by modifying lots of code I found.
例如： http://jsfiddle.net / XE6AG / 2 / （这就是我想要的）
或下面显示的代码。
For example: http://jsfiddle.net/XE6AG/2/ (thats what i want) or the code shown below.
我主要将原始描述数据放在实际表格之上。
I mostly get raw description data above the actual table.
<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>
感谢您的帮助。
推荐答案
我设法使用bootstrap解决它
I managed to "solve" it using bootstrap
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>The web</title>
<style>
.hiddenRow {
padding: 0 !important;
}
</style>
<style>
tr.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
tr.accordion.active, tr.accordion:hover {
background-color: #ddd;
}
tr.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
tr.accordion.active:after {
content: "\2212";
}
tr.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<?php
include("info.php");
$query = "SELECT * FROM list1 ORDER BY `FName` ASC";
$result = mysql_query($query);
?>
<table>
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<!-- populate table from mysql database -->
<?php $i=0; while($row = mysql_fetch_assoc($result)) { $i++; ?>
<tbody id="accordion" class="accordion-group">
<tr data-toggle="collapse" data-target="#name_<?php echo $i;?>" class="accordion-toggle 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 class="panel">
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" id="name_<?php echo $i;?>">
<?php echo $row['Description'];?>
</div>
</td>
</tr>
</tbody>
<?php }?>
</table>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var tr = this.nextElementSibling;
if (tr.style.maxHeight){
tr.style.maxHeight = null;
} else {
tr.style.maxHeight = tr.scrollHeight + 'px';
}
}
}
</script>
</body>
这篇关于表手风琴使用PHP和MySQL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
