如何更改每个 html 表格行手风琴

Posted 2023-05-08

【中文标题】如何更改每个 html 表格行手风琴

【英文标题】：How to change each html table row accordian

【发布时间】：2020-01-30 23:23:35

【问题描述】：

我想创建一个动态表，它的所有条目都来自数据库。我知道如何通过这个Twitter Bootstrap Use collapse.js on table cells [Almost Done] 制作一个简单的桌面手风琴。 如果我应用这种技术，它会将表格行变成手风琴，但无论我点击哪一行，它只会扩展第一行。 这是我的表从数据库获取数据的代码。

<div class="container">
<h2>All the Suggestions of HR</h2>
<div class="table-responsive">
    <table id="myTable"  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>

每当点击一行时，我想要显示的内容对于每一行都是不同的。

【参考方案1】：

    <?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; ?>