使用 php 和 MySQL 的表手风琴答案

【问题标题】：Table accordion using php and MySQL使用 php 和 MySQL 的表手风琴
【发布时间】：2017-06-02 00:49:09
【问题描述】：

我正在尝试为从数据库获得的数据制作一个手风琴表。只想在单击行后在下面的行中显示描述数据。我一直在尝试修改我找到的大量代码。

例如：http://jsfiddle.net/XE6AG/2/（这就是我想要的）或如下所示的代码。

我主要在实际表格上方获得原始描述数据。

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

感谢您的帮助。

【问题讨论】：

那么您发布的内容有什么问题？你没有告诉我们什么是有效的。
我正在尝试制作一个像这样的表手风琴：jsfiddle.net/XE6AG/2 但使用来自 mysql 数据库的数据。如果我编辑脚本 - 添加 php、mysql 的东西，如图所示，它不起作用。表格中的所有行都已打印（没有任何内容被隐藏），但我希望在单击上面的行之前隐藏描述行。

标签： javascript php jquery mysql html

【解决方案1】：

我设法使用引导程序“解决”它

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

【讨论】：