[英]How to change each html table row accordian
我想创建一个动态表,它的所有条目都来自数据库。 我知道如何通过这个Twitter Bootstrap 制作一个简单的表格手风琴 在表格单元格上使用 collapse.js [几乎完成] 。 如果我应用这种技术,它会将表格行变成手风琴,但无论我点击哪一行,它只会扩展第一行。 这是我的表从数据库获取数据的代码。
<div class="container">
<h2>All the Suggestions of HR</h2>
<div class="table-responsive">
<table id="myTable" width="100%" class="table table-striped display responsive nowrap table-hover">
<thead>
<tr>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Message</th>
<th scope="col">department</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
$nr = mysqli_num_rows($result);
while($row = mysqli_fetch_assoc($result)) :
$id = $row['hr_id'];
?>
<tr>
<?php $timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp));
$status = $row['isAnswered'];
?>
<td><?php if ($status == 'true') {
echo "Answerd";
}
else{
echo "Pending";
} ?></td>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php echo $row['message'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
每当单击一行时,我想显示的内容对于每一行都是不同的。
<?php
while($row = mysqli_fetch_assoc($result)) :
$id = $row['hr_id'];
?>
<tr data-toggle="collapse" data-target="#accordian_<?php echo $id; ?>" class="accordion-toggle">
<?php $timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp));
$status = $row['isAnswered'];
?>
<td><?php echo $status == 'true' ? 'Answerd' : 'Pending'; ?></td>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php echo $row['message'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
</tr>
<tr >
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse" id="accordian_<?php echo $id; ?>"> Your Text here</div>
</td>
</tr>
<?php endwhile; ?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.